import Image from "next/image";
import Link from "next/link";
import type { HTMLAttributes } from "react";
import { cn } from "@/lib/cn";

export interface BrandLogoCardProps extends HTMLAttributes<HTMLElement> {
  name: string;
  href?: string;
  imageUrl?: string;
  imageAlt?: string;
}

export function BrandLogoCard({
  className,
  name,
  href,
  imageUrl,
  imageAlt,
  ...props
}: BrandLogoCardProps) {
  const content = imageUrl ? (
    <Image
      src={imageUrl}
      alt={imageAlt?.trim() || name}
      fill
      sizes="140px"
      className="object-contain"
    />
  ) : (
    <span aria-hidden="true" className="block h-[28px] w-full" />
  );

  return (
    <article
      className={cn(
        "flex h-[54px] w-[140px] shrink-0 items-center justify-center",
        className,
      )}
      {...props}
    >
      {href ? (
        <Link
          href={href}
          aria-label={name}
          className="relative flex h-full w-full items-center justify-center focus-visible:outline-none"
        >
          {content}
        </Link>
      ) : (
        <div
          aria-label={name}
          className="relative flex h-full w-full items-center justify-center"
        >
          {content}
        </div>
      )}
    </article>
  );
}