import { cn } from './cva'

export interface RefreshSignalProps {
  className?: string
  variant?: 'refreshing' | 'error'
}

function readDocumentDirection(): 'ltr' | 'rtl' {
  if (typeof document === 'undefined') return 'ltr'
  return document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr'
}

const KEYFRAMES = `@keyframes refresh-signal-sweep-ltr{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes refresh-signal-sweep-rtl{0%{transform:translateX(100%)}100%{transform:translateX(-300%)}}`

export function RefreshSignal({ className, variant = 'refreshing' }: RefreshSignalProps) {
  const direction = readDocumentDirection()

  return (
    <div
      aria-hidden="true"
      data-testid="refresh-signal"
      data-variant={variant}
      className={cn('pointer-events-none absolute inset-x-0 top-0 h-0.5 overflow-hidden', className)}
    >
      <style>{KEYFRAMES}</style>
      <div
        data-testid="refresh-signal-bar"
        className={cn(
          'h-full w-1/3 motion-reduce:animate-none',
          variant === 'error' ? 'bg-danger' : 'bg-accent',
          direction === 'rtl'
            ? 'animate-[refresh-signal-sweep-rtl_1.2s_ease-in-out_infinite]'
            : 'animate-[refresh-signal-sweep-ltr_1.2s_ease-in-out_infinite]',
        )}
      />
    </div>
  )
}