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

export type CryptoIconAsset = "BTC" | "ETH" | "USDC" | "USDT";

export function CryptoIcon({ asset, className }: { asset: CryptoIconAsset | string; className?: string }) {
  const normalized = asset.toUpperCase();

  if (normalized === "BTC") {
    return (
      <svg viewBox="0 0 32 32" aria-hidden="true" className={cn("h-6 w-6", className)}>
        <circle cx="16" cy="16" r="16" fill="#F7931A" />
        <path
          fill="#fff"
          d="M20.9 14.2c.3-2-1.2-3.1-3.3-3.8l.7-2.7-1.6-.4-.7 2.6-1.3-.3.7-2.6-1.6-.4-.7 2.7-1.1-.3-2.2-.5-.4 1.7s1.2.3 1.1.3c.6.2.8.6.7 1l-1.9 7.4c-.1.2-.3.6-.8.5 0 0-1.1-.3-1.1-.3l-.8 1.8 2.1.5 1.2.3-.7 2.7 1.6.4.7-2.7 1.3.3-.7 2.7 1.6.4.7-2.7c2.8.5 4.9.3 5.8-2.2.7-2-.1-3.1-1.6-3.8 1.1-.3 2-1 2.3-2.3Zm-4.1 5c-.5 2-4 .9-5.1.6l.9-3.6c1.1.3 4.7.8 4.2 3Zm.5-5.1c-.5 1.8-3.4.9-4.3.6l.8-3.2c.9.2 4 .8 3.5 2.6Z"
        />
      </svg>
    );
  }

  if (normalized === "ETH") {
    return (
      <svg viewBox="0 0 32 32" aria-hidden="true" className={cn("h-6 w-6", className)}>
        <circle cx="16" cy="16" r="16" fill="#627EEA" />
        <path fill="#fff" fillOpacity=".6" d="M16.1 4v8.9l7.5 3.4L16.1 4Z" />
        <path fill="#fff" d="M16.1 4 8.6 16.3l7.5-3.4V4Z" />
        <path fill="#fff" fillOpacity=".6" d="M16.1 22.1v6l7.5-10.4-7.5 4.4Z" />
        <path fill="#fff" d="M16.1 28.1v-6l-7.5-4.4 7.5 10.4Z" />
        <path fill="#fff" fillOpacity=".35" d="m16.1 20.7 7.5-4.4-7.5-3.4v7.8Z" />
        <path fill="#fff" fillOpacity=".75" d="m8.6 16.3 7.5 4.4v-7.8l-7.5 3.4Z" />
      </svg>
    );
  }

  if (normalized === "USDC") {
    return (
      <svg viewBox="0 0 32 32" aria-hidden="true" className={cn("h-6 w-6", className)}>
        <circle cx="16" cy="16" r="16" fill="#2775CA" />
        <path fill="#fff" d="M14.8 24.8c-4.3-.6-7.6-4.3-7.6-8.8s3.3-8.2 7.6-8.8v2.1a6.8 6.8 0 0 0 0 13.4v2.1Zm2.4 0v-2.1a6.8 6.8 0 0 0 0-13.4V7.2c4.3.6 7.6 4.3 7.6 8.8s-3.3 8.2-7.6 8.8Z" />
        <path
          fill="#fff"
          d="M16.6 20.5v1.6h-1.4v-1.5c-1.6-.2-2.8-1-3.4-2.2l1.8-1c.4.8 1.2 1.3 2.3 1.3 1 0 1.6-.4 1.6-1 0-.7-.8-.9-2.1-1.2-1.6-.4-3.1-1-3.1-2.9 0-1.5 1.1-2.6 2.9-2.9V9.2h1.4v1.5c1.3.2 2.4.9 3 2l-1.7 1c-.4-.8-1-1.1-1.9-1.1-.9 0-1.4.4-1.4 1 0 .6.7.8 2 1.1 1.7.4 3.3.9 3.3 3 0 1.6-1.2 2.6-3.3 2.8Z"
        />
      </svg>
    );
  }

  if (normalized === "USDT") {
    return (
      <svg viewBox="0 0 32 32" aria-hidden="true" className={cn("h-6 w-6", className)}>
        <circle cx="16" cy="16" r="16" fill="#26A17B" />
        <path fill="#fff" d="M23.8 8.2H8.2v3.7h5.9v2.2c-4.8.2-8.4 1.1-8.4 2.2s3.6 2 8.4 2.2v7.3h3.8v-7.3c4.8-.2 8.4-1.1 8.4-2.2s-3.6-2-8.4-2.2v-2.2h5.9V8.2Zm-7.8 9c-5.1 0-9.2-.5-9.2-1.1 0-.5 3.1-.9 7.3-1v1.7h3.8v-1.7c4.2.1 7.3.5 7.3 1 0 .6-4.1 1.1-9.2 1.1Z" />
      </svg>
    );
  }

  return (
    <span className={cn("grid h-6 w-6 place-items-center rounded-full bg-white/[0.08] text-[10px] font-black text-white", className)}>
      {normalized.slice(0, 3)}
    </span>
  );
}
