import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'
import React from 'react'

import { VIEWER_NAV_CLASS } from './viewerChromeClasses'

export interface CarouselNavProps {
  onPrev: () => void
  onNext: () => void
  /** Accessible label for the previous-item button. */
  prevLabel?: string
  /** Accessible label for the next-item button. */
  nextLabel?: string
}

/**
 * Prev / next chrome shared by every carousel-aware viewer. Rendered
 * inside the dialog body so the buttons sit absolutely positioned
 * against the viewer, mid-height on each edge.
 */
const CarouselNav: React.FC<CarouselNavProps> = ({
  onPrev,
  onNext,
  prevLabel = 'Previous',
  nextLabel = 'Next',
}) => (
  <>
    <button
      type="button"
      onClick={onPrev}
      aria-label={prevLabel}
      className={`${VIEWER_NAV_CLASS} left-4`}
    >
      <CaretLeftIcon size={20} weight="bold" aria-hidden />
    </button>
    <button
      type="button"
      onClick={onNext}
      aria-label={nextLabel}
      className={`${VIEWER_NAV_CLASS} right-4`}
    >
      <CaretRightIcon size={20} weight="bold" aria-hidden />
    </button>
  </>
)

export default CarouselNav