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

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

export function CaretLineDownIcon({ variant = 'regular', ...props }: CaretLineDownIconProps) {
  const src = (() => {
    switch (variant) {
      default:
      case 'regular':
        return <svg fill="currentColor" viewBox="0 0 256 256"><path d="M42.34 77.66a8 8 0 0 1 11.32-11.32L128 140.69l74.34-74.35a8 8 0 0 1 11.32 11.32l-80 80a8 8 0 0 1-11.32 0ZM208 184H48a8 8 0 0 0 0 16h160a8 8 0 0 0 0-16" /></svg>
      case 'thin':
        return <svg fill="currentColor" viewBox="0 0 256 256"><path d="M45.17 74.83a4 4 0 0 1 5.66-5.66L128 146.34l77.17-77.17a4 4 0 1 1 5.66 5.66l-80 80a4 4 0 0 1-5.66 0ZM208 188H48a4 4 0 0 0 0 8h160a4 4 0 0 0 0-8" /></svg>
      case 'fill':
        return <svg fill="currentColor" viewBox="0 0 256 256"><path d="M42.34 77.66A8 8 0 0 1 48 64h160a8 8 0 0 1 5.66 13.66l-80 80a8 8 0 0 1-11.32 0ZM208 184H48a8 8 0 0 0 0 16h160a8 8 0 0 0 0-16" /></svg>
    }
  })()

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