import { MapPin, Phone } from "lucide-react";
import { Button } from "@/components/ui/button";
import { SafeImage } from "@/components/ui/SafeImage";
import { branches as mockBranches, type Branch } from "@/lib/mock-data";

type BranchesPreviewProps = {
  branches?: Branch[];
};

export function BranchesPreview({ branches = mockBranches }: BranchesPreviewProps) {
  return (
    <section className="bg-white py-3">
      <div className="container-custom">
        <div className="mb-4 flex items-center gap-3">
          <span className="h-1 w-9 rounded-full bg-primary" />
          <h2 className="text-sm font-extrabold uppercase tracking-[0.08em] text-navy-deep md:text-base">
            Visit Our Branches
          </h2>
        </div>
        <div className="grid gap-4 lg:grid-cols-2">
          {branches.map((branch) => (
            <article
              className="rounded-xl border border-border bg-white p-3 shadow-card"
              key={branch.id}
            >
              {/** Prefer admin-managed branch image, fall back to old slug-based placeholder. */}
              {(() => {
                const imageSrc = branch.branchImage?.trim()
                  ? branch.branchImage
                  : `/images/gallery/${branch.slug}.png`;
                return (
              <div className="grid gap-4 sm:grid-cols-[0.9fr_1fr]">
                <SafeImage
                  src={imageSrc}
                  alt={branch.name}
                  className="h-44 w-full rounded-xl object-cover sm:h-full"
                  fallbackSrc="/images/backgrounds/hero-bg-general.png"
                />
                <div className="flex flex-col justify-between gap-4 p-2">
                  <div>
                    <h3 className="text-lg font-black text-navy-deep">
                      {branch.city}, {branch.district}
                    </h3>
                    <p className="mt-1 text-xs font-semibold text-navy-muted">
                      {branch.type}
                    </p>
                    <div className="mt-4 space-y-3 text-sm text-navy-muted">
                      <p className="flex items-center gap-2">
                        <MapPin className="h-4 w-4 text-ev" />
                        {branch.name.replace("Bashista Auto - ", "")}, Nepal
                      </p>
                      <p className="flex items-center gap-2">
                        <Phone className="h-4 w-4 text-ev" />
                        {branch.phone}
                      </p>
                    </div>
                  </div>
                  <Button href={branch.mapLink} variant="green" size="sm">
                    Get Directions
                  </Button>
                </div>
              </div>
                );
              })()}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}