import { cn } from '@/shared/lib/cn';

type IconName =
  | 'camera'
  | 'check'
  | 'circle'
  | 'info'
  | 'shield'
  | 'signal'
  | 'spark'
  | 'warning';

type IconProps = {
  name: IconName;
  className?: string;
};

export function Icon({ name, className }: IconProps) {
  return (
    <svg
      aria-hidden="true"
      className={cn('h-4 w-4 shrink-0', className)}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="1.8"
    >
      {paths[name]}
    </svg>
  );
}

const paths: Record<IconName, React.ReactNode> = {
  camera: (
    <>
      <path d="M4 8.8A2.8 2.8 0 0 1 6.8 6h1.7l1.2-1.8h4.6L15.5 6h1.7A2.8 2.8 0 0 1 20 8.8v7.4a2.8 2.8 0 0 1-2.8 2.8H6.8A2.8 2.8 0 0 1 4 16.2V8.8Z" />
      <path d="M9 12.5a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z" />
    </>
  ),
  check: <path d="m5 12.5 4.2 4.2L19 6.8" />,
  circle: <path d="M12 19.2a7.2 7.2 0 1 0 0-14.4 7.2 7.2 0 0 0 0 14.4Z" />,
  info: (
    <>
      <path d="M12 17v-6" />
      <path d="M12 7.3h.01" />
      <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
    </>
  ),
  shield: <path d="M12 21s7-3.4 7-10.2V5.4L12 3 5 5.4v5.4C5 17.6 12 21 12 21Z" />,
  signal: (
    <>
      <path d="M4.8 13.6a10.2 10.2 0 0 1 14.4 0" />
      <path d="M8 16.8a5.7 5.7 0 0 1 8 0" />
      <path d="M12 20h.01" />
    </>
  ),
  spark: (
    <>
      <path d="M12 3.5 13.8 9l5.7 1.8-5.7 1.9L12 18.5l-1.8-5.8-5.7-1.9L10.2 9 12 3.5Z" />
      <path d="m18 4 1 2.6 2.5.9-2.5.8L18 11l-.9-2.7-2.6-.8 2.6-.9L18 4Z" />
    </>
  ),
  warning: (
    <>
      <path d="M12 8v5" />
      <path d="M12 17h.01" />
      <path d="m10.2 4.4-7 12.2A2.2 2.2 0 0 0 5.1 20h13.8a2.2 2.2 0 0 0 1.9-3.4l-7-12.2a2.1 2.1 0 0 0-3.6 0Z" />
    </>
  ),
};