import type { SetOptional } from 'type-fest'

import type { IconProps } from '../components/Icon.tsx'
import { cn } from '../utils/index.ts'
import { CaretDownIcon } from './icons.generated/CaretDownIcon.tsx'

export interface CaretDownInteractiveIconProps extends SetOptional<IconProps, 'alt'> {}

// TODO: Change the animation to be a flip on the x axis instead of a rotation?
export function CaretDownInteractiveIcon({ className, ...props }: CaretDownInteractiveIconProps) {
  return (
    <CaretDownIcon
      alt=""
      data-name="CaretDownInteractive"
      className={cn(
        `u:pointer-events-none
        u:transition-[rotate]
        u:in-clickable-open:rotate-180`,
        className,
      )}
      {...props}
    />
  )
}
