import type { SetOptional } from 'type-fest'

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

export interface ArrowUpRightInteractiveIconProps extends SetOptional<IconProps, 'alt'> {
  /**
   * By default (`false`), the arrow is always visible and translates away from its layout position
   * when the surrounding button/link is hovered. When set to `true`, the arrow starts hidden and
   * becomes visible on hover or focus, translating _toward_ its layout position. The `if-can-hover`
   * option behaves like `true` on devices that support hover and `false` on those that don't (e.g.
   * touch-only devices).
   *
   * @default false
   */
  hiddenByDefault?: boolean | 'if-can-hover'
}

export function ArrowUpRightInteractiveIcon({
  hiddenByDefault = false,
  className,
  ...props
}: ArrowUpRightInteractiveIconProps) {
  return (
    <ArrowUpRightIcon
      alt=""
      data-name="ArrowUpRightInteractive"
      data-hidden-by-default={hiddenByDefault || undefined}
      className={cn(
        `u:pointer-events-none
        u:transition-[opacity,translate]
        u:data-hidden-by-default:translate-x-[calc(-15%*var(--gds-rtl-factor))]
        u:data-hidden-by-default:translate-y-[15%]
        u:data-hidden-by-default:opacity-0
        u:data-[hidden-by-default=if-can-hover]:not-can-hover:translate-x-0
        u:data-[hidden-by-default=if-can-hover]:not-can-hover:translate-y-0
        u:data-[hidden-by-default=if-can-hover]:not-can-hover:opacity-100
        u:data-hidden-by-default:nearest-clickable-hocus-visible:translate-x-0
        u:data-hidden-by-default:nearest-clickable-hocus-visible:translate-y-0
        u:data-hidden-by-default:nearest-clickable-hocus-visible:opacity-100
        u:not-data-hidden-by-default:nearest-clickable-hover:translate-x-[calc(15%*var(--gds-rtl-factor))]
        u:not-data-hidden-by-default:nearest-clickable-hover:translate-y-[-15%]`,
        className,
      )}
      {...props}
    />
  )
}
