EntityMark

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { BuildingLibraryIcon, BuildingOffice2Icon, CreditCardIcon, ShoppingBagIcon } from "@/components/ledger/icons";

type Category = "bank" | "merchant" | "card" | "company";

const CATEGORY_ICON = {
  bank: BuildingLibraryIcon,
  card: CreditCardIcon,
  company: BuildingOffice2Icon,
  merchant: ShoppingBagIcon,
} as const;

export interface EntityMarkProps extends React.ComponentPropsWithoutRef<"div"> {
  category?: Category;
  name: string;
  size?: 20 | 24 | 32 | 40 | 48;
  src?: string;
}

/**
 * The full fallback ladder — provided → deterministic monogram → category
 * icon. Never a broken image.
 */
export const EntityMark = React.forwardRef<HTMLDivElement, EntityMarkProps>(
  ({ className, name, src, category = "merchant", size = 32, ...props }, ref) => {
    const Icon = CATEGORY_ICON[category];
    const monogram = initials(name);

    return (
      <div
        aria-hidden="true"
        className={cn(
          "grid shrink-0 place-items-center overflow-hidden rounded-sm bg-surface-sunken",
          "border border-border-subtle",
          className,
        )}
        ref={ref}
        style={{ height: size, width: size }}
        title={name}
        {...props}
      >
        {src ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img alt="" className="size-full object-contain p-[20%] [filter:saturate(0.85)]" src={src} />
        ) : monogram ? (
          <span className="font-medium text-text-secondary" style={{ fontSize: Math.round(size * 0.38) }}>
            {monogram}
          </span>
        ) : (
          <Icon className="text-text-tertiary" style={{ height: size * 0.5, width: size * 0.5 }} />
        )}
      </div>
    );
  },
);
EntityMark.displayName = "EntityMark";

function initials(name: string): string {
  const words = name.trim().split(/\s+/).filter(Boolean);
  if (words.length === 0) return "";
  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
  return (words[0][0] + words[1][0]).toUpperCase();
}