import { ChevronRightIcon } from '../icons'

interface LightboxNavButtonProps {
  direction: 'previous' | 'next'
  disabled: boolean
  onClick: () => void
}

export function LightboxNavButton({ direction, disabled, onClick }: LightboxNavButtonProps) {
  const isNext = direction === 'next'

  return (
    <button
      className={`absolute top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/20 disabled:opacity-20 ${
        isNext ? 'right-72 lg:right-80' : 'left-4'
      }`}
      disabled={disabled}
      onClick={(event) => {
        event.stopPropagation()
        onClick()
      }}
      aria-label={isNext ? 'Next image' : 'Previous image'}
    >
      {isNext ? (
        <ChevronRightIcon className="h-5 w-5" />
      ) : (
        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
        </svg>
      )}
    </button>
  )
}
