import type { AcAppKey } from '../lib/acAssets'

const stroke = {
  fill: 'none',
  stroke: 'currentColor',
  strokeWidth: 1.75,
  strokeLinecap: 'round' as const,
  strokeLinejoin: 'round' as const,
}

const paths: Record<AcAppKey, React.ReactNode> = {
  home: <path {...stroke} d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z" />,
  jobs: <path {...stroke} d="M6 4h12a1 1 0 0 1 1 1v14l-7-3.5L5 19V5a1 1 0 0 1 1-1Z" />,
  schedule: (
    <>
      <path {...stroke} d="M8 2v4M16 2v4M4 8h16M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" />
      <path {...stroke} d="M8 12h4M8 16h8" />
    </>
  ),
  ai: (
    <>
      <rect {...stroke} x="5" y="7" width="14" height="10" rx="2" />
      <path {...stroke} d="M9 11h.01M15 11h.01M10 15h4" />
      <path {...stroke} d="M12 4v2" />
    </>
  ),
  template: (
    <>
      <path {...stroke} d="M8 4h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" />
      <path {...stroke} d="M10 9h8M10 13h8M10 17h5" />
    </>
  ),
  settings: (
    <>
      <circle {...stroke} cx="12" cy="12" r="3" />
      <path
        {...stroke}
        d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4"
      />
    </>
  ),
  profile: (
    <>
      <circle {...stroke} cx="12" cy="8" r="3.5" />
      <path {...stroke} d="M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6" />
    </>
  ),
  permissions: (
    <>
      <path {...stroke} d="M8 11V8a4 4 0 1 1 8 0v3" />
      <rect {...stroke} x="6" y="11" width="12" height="9" rx="2" />
    </>
  ),
  more: (
    <>
      <circle fill="currentColor" cx="7" cy="12" r="1.5" stroke="none" />
      <circle fill="currentColor" cx="12" cy="12" r="1.5" stroke="none" />
      <circle fill="currentColor" cx="17" cy="12" r="1.5" stroke="none" />
    </>
  ),
}

export function AcIcon({
  app,
  size = 'md',
  className = '',
}: {
  app: AcAppKey
  size?: 'sm' | 'md' | 'lg'
  className?: string
}) {
  const px = size === 'sm' ? 'h-9 w-9' : size === 'lg' ? 'h-12 w-12' : 'h-10 w-10'
  const iconPx = size === 'sm' ? 'h-4 w-4' : size === 'lg' ? 'h-6 w-6' : 'h-5 w-5'
  return (
    <span className={`ac-app-icon-svg ${px} ${className}`}>
      <svg aria-hidden className={iconPx} viewBox="0 0 24 24">
        {paths[app]}
      </svg>
    </span>
  )
}