"use client";

import Image from "next/image";
import { useState } from "react";

/**
 * Client-side brand logo with graceful degradation: when a brand has no logo
 * (or the logo URL fails to load), the tile renders a monogram instead of a
 * broken image. We never synthesize a logo URL from the brand slug.
 */
export default function BrandLogo({
  src,
  name,
}: {
  src?: string | null;
  name: string;
}) {
  const [failed, setFailed] = useState(false);

  if (!src || failed) {
    return (
      <span
        aria-hidden
        className="flex h-20 w-20 items-center justify-center rounded-full bg-surface-container text-sm font-bold text-on-surface-variant"
      >
        {name.slice(0, 2).toUpperCase()}
      </span>
    );
  }

  return (
    <Image
      src={src}
      alt={`${name} logo`}
      width={1200}
      height={1200}
      className="w-20 p-2"
      onError={() => setFailed(true)}
    />
  );
}