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

export interface LoadingIconProps extends Omit<IconProps, 'alt'> {
  /** @default 'Loading' */
  alt?: IconProps['alt']
}

export function LoadingIcon({ alt = 'Loading', ...props }: LoadingIconProps) {
  return (
    <Icon
      src={
        <svg
          viewBox="0 0 32 32"
          fill="currentcolor"
          className={`
            u:*:animate
            u:*:origin-center
            u:*:animate-scale-from-80
            u:*:animate-scale-to-120
            u:*:animate-opacity-from-50
            u:*:animate-opacity-to-100
            u:*:animate-alternate
            u:*:animate-duration-600
            u:*:animate-ease-in
            u:*:animate-infinite
            u:*:transform-fill
          `}
        >
          <path
            d="M2.667,16L6.667,12L10.667,16L6.667,20L2.667,16Z"
            className="animate-delay-[-400ms]"
          />
          <path d="M12,16L16,12L20,16L16,20L12,16Z" className="animate-delay-[-200ms]" />
          <path d="M21.333,16L25.333,12L29.333,16L25.333,20L21.333,16Z" />
        </svg>
      }
      alt={alt}
      data-name="Loading"
      {...props}
    />
  )
}
