import Link from "next/link";
import { MapPin, Mail, Phone } from "lucide-react";
import { Logo } from "@/components/logo";

export function PublicFooter({
  nama,
  alamat,
  kecamatan,
  kabupaten,
  provinsi,
  telepon,
  email,
}: {
  nama: string;
  alamat: string | null;
  kecamatan: string;
  kabupaten: string;
  provinsi: string;
  telepon: string | null;
  email: string | null;
}) {
  return (
    <footer className="mt-20 border-t border-white/10 bg-sidebar text-sidebar-foreground">
      <div className="container grid gap-10 py-12 md:grid-cols-[1.4fr_1fr_1fr]">
        <div>
          <div className="flex items-center gap-3">
            <Logo className="h-12 w-auto" />
            <div>
              <div className="font-bold">Desa {nama.replace(/^Desa\s+/i, "")}</div>
              <div className="text-xs text-sidebar-muted">
                {kecamatan}, {kabupaten}
              </div>
            </div>
          </div>
          <p className="mt-4 max-w-sm text-sm leading-relaxed text-sidebar-muted">
            Website resmi Pemerintah Desa {nama.replace(/^Desa\s+/i, "")}. Media
            informasi, transparansi anggaran, dan pelayanan publik desa.
          </p>
        </div>

        <div>
          <div className="mb-3 text-sm font-semibold">Tautan</div>
          <ul className="space-y-2 text-sm text-sidebar-muted">
            {[
              { href: "/profil", label: "Profil Desa" },
              { href: "/berita", label: "Berita Desa" },
              { href: "/statistik", label: "Statistik Penduduk" },
              { href: "/apbdes", label: "Transparansi APBDes" },
              { href: "/login", label: "Administrasi Desa" },
            ].map((item) => (
              <li key={item.href}>
                <Link href={item.href} className="transition-colors hover:text-white">
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <div className="mb-3 text-sm font-semibold">Kontak</div>
          <ul className="space-y-3 text-sm text-sidebar-muted">
            <li className="flex gap-2">
              <MapPin className="mt-0.5 h-4 w-4 shrink-0" />
              <span>{alamat ?? `${kecamatan}, ${kabupaten}, ${provinsi}`}</span>
            </li>
            {telepon && (
              <li className="flex gap-2">
                <Phone className="mt-0.5 h-4 w-4 shrink-0" />
                <span>{telepon}</span>
              </li>
            )}
            {email && (
              <li className="flex gap-2">
                <Mail className="mt-0.5 h-4 w-4 shrink-0" />
                <span>{email}</span>
              </li>
            )}
          </ul>
        </div>
      </div>
      <div className="border-t border-white/10 py-5 text-center text-xs text-sidebar-muted">
        © {new Date().getFullYear()} Pemerintah Desa {nama.replace(/^Desa\s+/i, "")}.
        Dibangun dengan Next.js, NestJS, MySQL, dan Prisma.
      </div>
    </footer>
  );
}