import { appConfig } from "@/shared/config/app-config";
import Image from "next/image";
import Link from "next/link";
import { Button } from "../button/button";
import { Mail, MapPin, Phone } from "lucide-react";

const socmed = [
  // {
  //   id: 1,
  //   name: "Facebook",
  //   url: "https://www.facebook.com",
  //   icon: appConfig.iconFb,
  // },
  // {
  //   id: 2,
  //   name: "Twitter",
  //   url: "https://www.facebook.com",
  //   icon: appConfig.iconTw,
  // },
  {
    id: 3,
    name: "Instagram",
    url: " https://www.instagram.com/kominfojatim?igsh=MWpueG9rcHppcmtjcw==",
    icon: appConfig.iconIg,
  },
  {
    id: 4,
    name: "Youtube",
    url: "https://youtube.com/@kominfommc?si=t_buZrUVCjRxWa67",
    icon: appConfig.iconYt,
  },
];

const Footer = () => {
  const year = new Date().getFullYear();
  return (
    <footer className="font-onest bg-biru-500 px-6 py-12 text-white">
      <div className="container flex flex-wrap items-start justify-between">
        <div className="flex flex-col gap-y-4">
          <Image
            src={appConfig.logoFooter}
            alt="Logo"
            width={200}
            height={50}
          />
          <p className="max-w-80 text-base">
            Portal basis data spasial dan informasi Geospasial Provinsi Jawa
            Timur
          </p>
          <div className="flex-items-center mt-4 flex-wrap space-x-3">
            {socmed.map(
              (item) =>
                item && (
                  <Link
                    href={item.url}
                    key={item.id}
                    className="cursor-pointer"
                    target="_blank"
                  >
                    <Button variant={"whiteOutlined"} size={"icon"}>
                      <Image
                        src={item.icon}
                        alt={item.name}
                        width={16}
                        height={16}
                        className="object-containt aspect-square"
                      />
                    </Button>
                  </Link>
                ),
            )}
          </div>
        </div>

        <div className="flex flex-wrap items-start gap-x-18 gap-y-10">
          <div className="">
            <h6 className="text-md mb-6">Kontak</h6>
            <ul className="space-y-3 text-[#99A1AF]">
              <li className="flex items-start gap-x-1">
                <MapPin size={16} className="mt-1" />
                <p className="max-w-72">
                  Alamat : Jl. Ahmad Yani No.242-244, Gayungan, Kec. Gayungan,
                  Surabaya, Jawa Timur 60235
                </p>
              </li>
              <li className="flex items-center gap-x-1">
                <Phone size={16} />
                <p>(031) 8294608</p>
              </li>
              <li className="flex items-center gap-x-1">
                <Mail size={16} />
                <p>info@satupeta.jatimprov.go.id</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div className="container mt-12">
        <div className="flex items-center justify-start gap-2 py-4 text-sm text-[#99A1AF]">
          <span>&copy;</span>
          <span>{year}</span>
          <span>Pemerintah Provinsi Jawa Timur. All rights reserved.</span>
        </div>
      </div>
    </footer>
  );
};

export default Footer;