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

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

export function PictureInPictureIcon({ variant = 'regular', ...props }: PictureInPictureIconProps) {
  const src = (() => {
    switch (variant) {
      default:
      case 'regular':
        return <svg fill="currentColor" viewBox="0 0 256 256"><path d="M216 48H40a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16M40 64h176v56h-80a8 8 0 0 0-8 8v64H40Zm176 128h-72v-56h72z" /></svg>
      case 'thin':
        return <svg fill="currentColor" viewBox="0 0 256 256"><path d="M216 52H40a12 12 0 0 0-12 12v128a12 12 0 0 0 12 12h176a12 12 0 0 0 12-12V64a12 12 0 0 0-12-12M36 192V64a4 4 0 0 1 4-4h176a4 4 0 0 1 4 4v60h-84a4 4 0 0 0-4 4v68H40a4 4 0 0 1-4-4m180 4h-76v-64h80v60a4 4 0 0 1-4 4" /></svg>
      case 'fill':
        return <svg fill="currentColor" viewBox="0 0 256 256"><path d="M216 48H40a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16m0 144h-80v-64h80z" /></svg>
    }
  })()

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