const ORIGINS: Record<string, string> = {
  Left: 'left',
  Center: 'center',
  Diagonal: 'bottom left',
}

export default function FillSweepButton({ variant = 'Left' }: { variant?: string }) {
  const origin = ORIGINS[variant] ?? 'left'

  return (
    <button
      type="button"
      style={{ ['--fsb-origin' as string]: origin }}
      className={[
        '[--fsb-fill:#f5f5f6] [--fsb-ink:#f5f5f6] [--fsb-line:#3a3a42]',
        'relative isolate overflow-hidden rounded-md border border-[var(--fsb-line)] px-5 py-2.5',
        'text-sm font-semibold text-[var(--fsb-ink)] transition-colors duration-300',
        'before:absolute before:inset-0 before:-z-10 before:origin-[var(--fsb-origin)]',
        'before:scale-x-0 before:bg-[var(--fsb-fill)]',
        'before:transition-transform before:duration-300 before:ease-[cubic-bezier(0.2,0,0,1)]',
        variant === 'Diagonal' ? 'before:-skew-x-12' : '',
        'hover:text-[#141418] hover:before:scale-x-100',
        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--fsb-fill)]',
      ].join(' ')}
    >
      Sweep me
    </button>
  )
}