import Link from "next/link";
import { MapPin } from "lucide-react";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { SlotLink } from "@/components/SlotLink";
import { branches } from "@/lib/data";
import { parseAspectRatio } from "@/lib/static-images";
import type { SlotMediaItem } from "@/lib/static-images";

export function Branches({ images, aspectRatio }: { images?: SlotMediaItem[]; aspectRatio?: string }) {
  const ratio = parseAspectRatio(aspectRatio);

  return (
    <section className="bg-paper py-20">
      <Container>
        <div className="mb-10 flex items-end justify-between gap-4">
          <div>
            <p className="section-kicker">Locations</p>
            <h2 className="mt-3 text-3xl font-extrabold">دو شعبه در قم</h2>
          </div>
          <Link href="/contact" className="hidden text-[13px] font-bold text-brand sm:inline-flex">
            مسیر و تلفن‌ها
          </Link>
        </div>
        <div className="grid gap-5 md:grid-cols-2">
          {branches.map((branch, index) => {
            const media = images?.[index];
            const src = media?.image || branch.image;
            const href = media?.href || "/contact";
            return (
              <SlotLink key={branch.id} href={href} className="group overflow-hidden rounded-2xl bg-white">
                <div
                  className={`relative overflow-hidden ${ratio ? "" : "aspect-[16/8]"}`}
                  style={ratio ? { aspectRatio: ratio } : undefined}
                >
                  <Placeholder
                    src={src}
                    fallbackSrc={media?.fallbackSrc ?? branch.image}
                    alt={media?.title || branch.title}
                    className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                </div>
                <div className="flex gap-3 p-6">
                  <MapPin className="mt-1 size-5 shrink-0 text-brand" />
                  <div>
                    <h3 className="text-[18px] font-bold">{media?.title || branch.title}</h3>
                    <p className="mt-2 text-[14px] leading-7 text-muted">{media?.text || branch.address}</p>
                  </div>
                </div>
              </SlotLink>
            );
          })}
        </div>
      </Container>
    </section>
  );
}