"use client";

import { cn } from "@/lib/utils";
import type { Brand } from "@/types/cruise";

type BrandMarkProps = {
  brand: Pick<Brand, "name" | "primaryColor" | "logoUrl">;
  size?: "sm" | "md" | "lg";
  className?: string;
};

const sizeClass = {
  sm: "size-8 rounded-lg text-xs",
  md: "size-12 rounded-2xl text-sm",
  lg: "size-16 rounded-2xl text-base",
} as const;

export function BrandMark({ brand, size = "md", className }: BrandMarkProps) {
  if (brand.logoUrl) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={brand.logoUrl}
        alt={`${brand.name} logo`}
        className={cn("shrink-0 border object-cover", sizeClass[size], className)}
        style={{ borderColor: brand.primaryColor }}
      />
    );
  }

  const initials = brand.name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? "")
    .join("");

  return (
    <span
      className={cn("flex shrink-0 items-center justify-center border font-semibold", sizeClass[size], className)}
      style={{
        backgroundColor: `${brand.primaryColor}22`,
        borderColor: brand.primaryColor,
        color: brand.primaryColor,
      }}
      aria-hidden
    >
      {initials || "?"}
    </span>
  );
}