import { Icon, type IconProps } from '../../components/Icon.tsx'

export interface PlusIconProps extends IconProps {
  variant?: 'regular' | 'thin' | 'fill'
}

export function PlusIcon({ variant = 'regular', ...props }: PlusIconProps) {
  const src = (() => {
    switch (variant) {
      default:
      case 'regular':
        return <svg fill="currentColor" viewBox="0 0 256 256"><path d="M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8" /></svg>
      case 'thin':
        return <svg fill="currentColor" viewBox="0 0 256 256"><path d="M220 128a4 4 0 0 1-4 4h-84v84a4 4 0 0 1-8 0v-84H40a4 4 0 0 1 0-8h84V40a4 4 0 0 1 8 0v84h84a4 4 0 0 1 4 4" /></svg>
      case 'fill':
        return <svg fill="currentColor" viewBox="0 0 256 256"><path d="M208 32H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-24 104h-48v48a8 8 0 0 1-16 0v-48H72a8 8 0 0 1 0-16h48V72a8 8 0 0 1 16 0v48h48a8 8 0 0 1 0 16" /></svg>
    }
  })()

  return <Icon src={src} data-name="Plus" {...props} />
}
