import { useId } from 'react'

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

export interface AmpLogoIconProps extends IconProps {
  variant?: 'mono' | 'branded'
}

export function AmpLogoIcon({ variant = 'mono', ...props }: AmpLogoIconProps) {
  const id0 = useId()
  const id1 = useId()

  const src = (() => {
    switch (variant) {
      default:
      case 'mono':
        return <svg fill="currentcolor" viewBox="0 0 24 24"><path d="m16.043 12.857-.434-.871L12 15.619l-3.609-3.633-.434.871L12 21z" /><path d="M19.5 18.107a28 28 0 0 0-1.91-.421L12 6.429 6.41 17.686a28 28 0 0 0-1.91.421L12 3z" /></svg>
      case 'branded':
        return <svg viewBox="0 0 24 24"><path fill={`url(#${id0})`} d="m16.043 12.857-.434-.871L12 15.619l-3.609-3.633-.434.871L12 21z" /><path fill={`url(#${id1})`} d="M19.5 18.107a28 28 0 0 0-1.91-.421L12 6.429 6.41 17.686a28 28 0 0 0-1.91.421L12 3z" /><defs><linearGradient id={id0} x1={12} x2={12} y1={21} y2={14.09} gradientUnits="userSpaceOnUse"><stop stopColor="#A238FF" /><stop offset={1} stopColor="#6F4CFF" /></linearGradient><linearGradient id={id1} x1={12} x2={12} y1={18.107} y2={3} gradientUnits="userSpaceOnUse"><stop offset={0.39} stopColor="#6F4CFF" /><stop offset={1} stopColor="#3694FF" /></linearGradient></defs></svg>
    }
  })()

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