import { Link } from "@tanstack/react-router";
import { Calendar, ArrowRight } from "lucide-react";
import { Reveal, SectionHeader } from "@/components/Reveal";
import { informasi } from "@/lib/site-data";

function formatTanggal(d: string) {
  return new Date(d).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" });
}

export function InfoSection() {
  return (
    <section className="section-pad">
      <div className="container-x">
        <SectionHeader eyebrow="Informasi" title="Informasi Terbaru" subtitle="Berita, pengumuman, dan kegiatan terkini dari madrasah." />
        <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {informasi.map((item, i) => (
            <Reveal key={item.id} delay={i * 0.1}>
              <article className="neu neu-press flex h-full flex-col overflow-hidden">
                <div className="overflow-hidden p-3">
                  <img src={item.image} alt={item.judul} loading="lazy" className="h-48 w-full rounded-[16px] object-cover transition-transform duration-500 hover:scale-105" />
                </div>
                <div className="flex flex-1 flex-col p-6 pt-2">
                  <div className="flex items-center gap-3 text-xs">
                    <span className="rounded-full bg-accent px-3 py-1 font-semibold text-accent-foreground">{item.kategori}</span>
                    <span className="flex items-center gap-1 text-muted-foreground"><Calendar className="h-3.5 w-3.5" /> {formatTanggal(item.tanggal)}</span>
                  </div>
                  <h3 className="mt-3 font-display text-lg font-semibold leading-snug text-foreground">{item.judul}</h3>
                  <p className="mt-2 flex-1 text-sm text-muted-foreground">{item.ringkasan}</p>
                  <Link to="/informasi" className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-primary hover:gap-2 transition-all">
                    Baca Selengkapnya <ArrowRight className="h-4 w-4" />
                  </Link>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}