import type { SignatureBrandPartner } from "@/types/event";
import { QueueSection } from "@/components/motion/QueueSection";
import { QueueItem } from "@/components/motion/QueueItem";
import { SignatureSectionHeading } from "./SignatureSectionHeading";
import { SIGNATURE_SECTION_MIN_HEIGHT } from "./section-layout";

/** "Brand" — horizontally-scrollable strip of circular logo chips + sponsorship-invite heading. */
export function SignatureBrand({ partners }: { partners?: SignatureBrandPartner[] }) {
  return (
    <QueueSection as="section" className={`${SIGNATURE_SECTION_MIN_HEIGHT} px-6 py-16`}>
      <div className="mx-auto w-full max-w-3xl">
        <QueueItem as="div">
          <SignatureSectionHeading>Lets Join Us</SignatureSectionHeading>
          <p className="mt-2 text-sm text-neutral-600">
            Brand logos will appear here &mdash; scroll to see them all.
          </p>
        </QueueItem>

        {!partners || partners.length === 0 ? (
          <p className="mt-6 text-neutral-700">Coming soon.</p>
        ) : (
          <div className="mt-6 flex items-start gap-6 overflow-x-auto px-2 pb-2">
            {partners.map((partner, i) => (
              <QueueItem
                key={partner.id}
                as="div"
                className={`flex h-24 w-24 shrink-0 items-center justify-center rounded-full bg-white p-3 text-center shadow-lg ${
                  i % 2 === 0 ? "mt-0" : "mt-10"
                }`}
              >
                {partner.logo_url ? (
                  // eslint-disable-next-line @next/next/no-img-element -- partner-provided path, not on next/image allowlist
                  <img src={partner.logo_url} alt={partner.name} className="max-h-full max-w-full object-contain" />
                ) : (
                  <span className="text-xs font-medium text-neutral-700">{partner.name}</span>
                )}
              </QueueItem>
            ))}
          </div>
        )}
      </div>
    </QueueSection>
  );
}