import Link from "next/link";
import { BadgeCheck } from "lucide-react";
import type { BrandWithCount } from "@/lib/queries";
import { Reveal } from "./reveal";

export function BrandMarquee({ brands }: { brands: BrandWithCount[] }) {
  return (
    <section className="bg-white py-16">
      <div className="mx-auto max-w-7xl px-4 sm:px-6">
        <Reveal className="flex flex-col items-center justify-between gap-3 text-center sm:flex-row sm:text-left">
          <div>
            <p className="text-xs font-extrabold uppercase tracking-[0.2em] text-brand-600">
              Markalar
            </p>
            <h2 className="mt-2 font-display text-3xl font-extrabold text-ink sm:text-4xl">
              Patilerin Güvendiği Markalar
            </h2>
          </div>
          <p className="flex items-center gap-1.5 text-sm font-bold text-mocha">
            <BadgeCheck className="size-5 text-emerald-500" aria-hidden />
            %100 orijinal, faturalı ürün garantisi
          </p>
        </Reveal>
      </div>

      <div className="pause-on-hover mt-9 overflow-hidden">
        <div className="animate-marquee flex w-max items-center gap-3 px-4">
          {[0, 1].map((copy) => (
            <div key={copy} aria-hidden={copy === 1} className="flex items-center gap-3">
              {brands.map((brand) => (
                <Link
                  key={`${copy}-${brand.slug}`}
                  href={`/urunler?marka=${brand.slug}`}
                  className="group flex shrink-0 items-center gap-2 rounded-full border border-sand-dark bg-cream px-5 py-3 transition-all hover:-translate-y-1 hover:border-brand-400 hover:bg-white hover:shadow-lg hover:shadow-brand-500/10"
                >
                  <span className="font-display text-lg font-extrabold tracking-tight text-cocoa transition-colors group-hover:text-brand-700">
                    {brand.name}
                  </span>
                  <span className="rounded-full bg-brand-100 px-2 py-0.5 text-[10px] font-extrabold text-brand-700">
                    {brand.count}
                  </span>
                </Link>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}