"use client";

import { cn } from "@/lib/utils";

import {
  type CashflowStructureStatus,
  resolveStructureStatusIcon,
} from "../../_lib/cashflow-structure-status";

type CashflowStructureStatusIconProps = {
  earlyRedemption: 0 | 1;
  delivery: 0 | 1;
  size?: "xs" | "sm" | "md";
  className?: string;
  /** When provided, skip resolve (e.g. legend). */
  status?: CashflowStructureStatus;
  /** Omit native title when a parent tooltip already describes the status. */
  suppressTitle?: boolean;
};

function ShapeSvg({
  shape,
  color,
  sizePx,
}: {
  shape: CashflowStructureStatus["shape"];
  color: string;
  sizePx: number;
}) {
  const common = {
    width: sizePx,
    height: sizePx,
    viewBox: "0 0 12 12",
    className: "shrink-0",
    "aria-hidden": true as const,
  };

  switch (shape) {
    case "circle":
      return (
        <svg {...common}>
          <circle cx="6" cy="6" r="5" fill={color} />
        </svg>
      );
    case "square":
      return (
        <svg {...common}>
          <rect x="1.5" y="1.5" width="9" height="9" rx="1" fill={color} />
        </svg>
      );
    case "triangle":
      return (
        <svg {...common}>
          <path d="M6 1.5 L10.5 10.5 H1.5 Z" fill={color} />
        </svg>
      );
    case "diamond":
      return (
        <svg {...common}>
          <path d="M6 1 L11 6 L6 11 L1 6 Z" fill={color} />
        </svg>
      );
  }
}

export function CashflowStructureStatusIcon({
  earlyRedemption,
  delivery,
  size = "sm",
  className,
  status: statusProp,
  suppressTitle = false,
}: CashflowStructureStatusIconProps) {
  const status = statusProp ?? resolveStructureStatusIcon({ earlyRedemption, delivery });
  const sizePx = size === "md" ? 12 : size === "xs" ? 8 : 10;

  return (
    <span
      className={cn("inline-flex shrink-0 items-center justify-center", className)}
      title={suppressTitle ? undefined : status.label}
      aria-label={status.label}
    >
      <ShapeSvg shape={status.shape} color={status.color} sizePx={sizePx} />
    </span>
  );
}