"use client";

import { useState } from "react";
import Image from "next/image";
import type { LastYearWinner } from "@/content/last-year-winners";
import { cn } from "@/lib/utils";

const GRV_LOGO = "/branding/logo-icon.png";

type Props = {
  company: LastYearWinner;
  className?: string;
};

export function LastYearWinnerMark({ company, className }: Props) {
  const [failed, setFailed] = useState(false);
  const src = company.logoSrc ?? GRV_LOGO;
  const showImage = !failed && src;
  const logoOnly = !company.name;

  return (
    <div
      className={cn(
        "flex h-10 shrink-0 items-center gap-2 rounded-lg border border-white/25 bg-white/90 px-2.5 shadow-sm",
        logoOnly && "px-2",
        className
      )}
      title={company.name}
    >
      <div className="relative flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md bg-white">
        {showImage ? (
          <Image
            src={src}
            alt=""
            width={28}
            height={28}
            className="size-7 object-contain p-0.5"
            onError={() => setFailed(true)}
          />
        ) : company.initials ? (
          <span className="text-[10px] font-bold leading-none text-[#1a5c38]">
            {company.initials}
          </span>
        ) : (
          <Image
            src={GRV_LOGO}
            alt=""
            width={28}
            height={28}
            className="size-7 object-contain p-0.5"
          />
        )}
      </div>
      {company.name ? (
        <span className="max-w-[7.5rem] truncate text-[11px] font-medium text-[#1a5c38]">
          {company.name}
        </span>
      ) : null}
    </div>
  );
}