"use client";

import { cn } from "@/lib/utils";
import BoldIcon from "@/components/ui/BoldIcon";
import { staticIconUrl } from "@/components/main/BaseUrl";

export type ChatBoldIconName =
  | "timer"
  | "eye"
  | "attachment"
  | "microphone"
  | "camera"
  | "gallery"
  | "video"
  | "file"
  | "location"
  | "send"
  | "search"
  | "delete"
  | "back"
  | "reply";

/** Chat-specific SVG assets (custom uploads) */
const CHAT_ICON_SRC: Partial<Record<ChatBoldIconName, string>> = {
  timer: staticIconUrl("/images/icons/chat/timer.svg"),
  search: staticIconUrl("/images/icons/chat/search-normal.svg"),
  back: staticIconUrl("/images/icons/chat/back.svg"),
  reply: staticIconUrl("/images/icons/chat/reply.svg"),
};

const ICON_NAME: Record<ChatBoldIconName, string> = {
  timer: "timer",
  eye: "eye",
  attachment: "link",
  microphone: "microphone-2",
  camera: "camera",
  gallery: "gallery",
  video: "video",
  file: "folder-2",
  location: "location",
  send: "send-2",
  search: "search-normal",
  delete: "trash",
  back: "arrow-circle-right",
  reply: "direct-right",
};

interface ChatBoldIconProps {
  name: ChatBoldIconName;
  size?: number;
  className?: string;
}

export default function ChatBoldIcon({
  name,
  size = 20,
  className,
}: ChatBoldIconProps) {
  const customSrc = CHAT_ICON_SRC[name];

  if (customSrc) {
    return (
      <span
        role="img"
        aria-hidden
        className={cn("inline-block shrink-0 bg-current", className)}
        style={{
          width: size,
          height: size,
          WebkitMaskImage: `url(${customSrc})`,
          maskImage: `url(${customSrc})`,
          WebkitMaskRepeat: "no-repeat",
          maskRepeat: "no-repeat",
          WebkitMaskPosition: "center",
          maskPosition: "center",
          WebkitMaskSize: "contain",
          maskSize: "contain",
        }}
      />
    );
  }

  return (
    <BoldIcon
      name={ICON_NAME[name]}
      size={size}
      className={className}
      tinted
    />
  );
}
