import type { ChatSkillIconId } from '../utils/chatSkills';

type IconProps = { className?: string };

function SparkIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path
        fill="currentColor"
        d="M12 2.5 13.4 8.6 19 10l-5.6 1.4L12 17.5 10.6 11.4 5 10l5.6-1.4L12 2.5Zm-6.2 9.8 1.8.5-.5 1.8-1.8-.5.5-1.8Zm12.4 0 .5 1.8-1.8.5-.5-1.8 1.8-.5ZM12 18.8l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9.9-2.1Z"
      />
    </svg>
  );
}

function PageIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path
        fill="currentColor"
        d="M7 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.83a2 2 0 0 0-.59-1.41l-3.83-3.83A2 2 0 0 0 13.17 3H7Zm0 2h5v4a1 1 0 0 0 1 1h4v10H7V5Zm7 0.41L18.59 8H14V5.41ZM9 13h6v2H9v-2Zm0 4h4v2H9v-2Z"
      />
    </svg>
  );
}

function SearchIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path
        fill="currentColor"
        d="M10.5 3a7.5 7.5 0 1 0 4.73 13.32l4.08 4.08 1.41-1.41-4.08-4.08A7.47 7.47 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z"
      />
    </svg>
  );
}

function WebIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path
        fill="currentColor"
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm7.93 9h-3.18a15.7 15.7 0 0 0-1.14-4.02A8.03 8.03 0 0 1 19.93 11ZM12 4c.95 0 2.29 1.58 3.1 4H8.9C9.71 5.58 11.05 4 12 4ZM4.39 7.98A8.03 8.03 0 0 1 8.39 11H5.07a8.02 8.02 0 0 1-.68-3.02ZM5.07 13h3.32a15.7 15.7 0 0 0-1.14 4.02A8.03 8.03 0 0 1 4.39 16.02ZM8.9 18h6.2c-.81 2.42-2.15 4-3.1 4s-2.29-1.58-3.1-4Zm5.71 1.98A15.7 15.7 0 0 0 15.61 13h3.32a8.03 8.03 0 0 1-4 6.98ZM15.61 11a15.7 15.7 0 0 0 1.14-4.02h3.18a8.03 8.03 0 0 1-4.32 4.02H15.61Z"
      />
    </svg>
  );
}

function FormIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path
        fill="currentColor"
        d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5Zm2 4h10v2H7V7Zm0 4h10v2H7v-2Zm0 4h6v2H7v-2Z"
      />
    </svg>
  );
}

function TableIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path
        fill="currentColor"
        d="M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm2 0v3h12V5H6Zm0 5v4h5v-4H6Zm7 0v4h5v-4h-5ZM6 16v3h5v-3H6Zm7 0v3h5v-3h-5Z"
      />
    </svg>
  );
}

function SummaryIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path
        fill="currentColor"
        d="M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2H4V5Zm0 4h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9Zm3 2v2h10v-2H7Zm0 4v2h7v-2H7Z"
      />
    </svg>
  );
}

function AnalyzeIcon({ className }: IconProps) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path
        fill="currentColor"
        d="M3 3h2l3.6 7.59-1.35 2.44a3 3 0 0 0 2.61 4.47H19v-2H9.64a1 1 0 0 1-.87-1.5l.96-1.74L7.5 7H19V5H5.21l-.43-2H3Zm13 14a4 4 0 1 0 .01 8.01A4 4 0 0 0 16 17Zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z"
      />
    </svg>
  );
}

const ICONS: Record<ChatSkillIconId, (props: IconProps) => JSX.Element> = {
  spark: SparkIcon,
  page: PageIcon,
  search: SearchIcon,
  web: WebIcon,
  form: FormIcon,
  table: TableIcon,
  summary: SummaryIcon,
  analyze: AnalyzeIcon,
};

export function ChatSkillIcon({ id, className }: { id: ChatSkillIconId; className?: string }) {
  const Icon = ICONS[id];
  return <Icon className={className} />;
}