import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { brands as mockBrands, type Brand } from "@/lib/mock-data";

type BrandStripProps = {
  brands?: Brand[];
};

function isImagePath(value: string) {
  return /^(\/|https?:\/\/).+\.(png|jpe?g|webp|gif|svg)$/i.test(value.trim());
}

export function BrandStrip({ brands = mockBrands }: BrandStripProps) {
  return (
    <section className="bg-white pb-3 pt-5">
      <div className="container-custom">
        <div className="mb-4 flex items-center justify-between gap-4">
          <div className="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">
              Brands We Offer
            </h2>
          </div>
          <Link
            href="/brands"
            className="inline-flex items-center gap-2 text-sm font-semibold text-primary"
          >
            View All Brands <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
          {brands.map((brand) => (
            <Link
              key={brand.id}
              href={`/brands#${brand.slug}`}
              className="flex min-h-[5.5rem] items-center justify-center rounded-xl border border-border bg-white px-4 text-center shadow-card transition hover:-translate-y-0.5 hover:border-primary/40"
            >
              {isImagePath(brand.logoText) ? (
                <img src={brand.logoText} alt={`${brand.name} logo`} className="h-10 w-full object-contain" />
              ) : (
                <span className="inline-flex items-center rounded-full bg-primary-soft px-4 py-2 text-lg font-black uppercase tracking-[0.08em] text-navy-deep [font-family:'Trebuchet_MS','Segoe_UI',sans-serif]">
                  {brand.name === "TVS iQube" ? "TVS iQUBE" : brand.name}
                </span>
              )}
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}