import { ChevronLeft, ChevronRight } from "lucide-react";
import { memo } from "react";

interface ImageNavigationButtonsProps {
  onPrev: () => void;
  onNext: () => void;
  currentIndex: number;
  totalImages: number;
}

export const ImageNavigationButtons = memo(function ImageNavigationButtons({
  onPrev,
  onNext,
  currentIndex,
  totalImages,
}: ImageNavigationButtonsProps) {
  const hasPrev = currentIndex > 0;
  const hasNext = currentIndex < totalImages - 1;

  return (
    <>
      {/* 左侧按钮 */}
      <button
        type="button"
        className={`
          absolute left-4 top-6/17 -translate-y-1/2 z-20
          w-12 h-12 rounded-full
          bg-black/55 border border-white/20
          flex items-center justify-center
          text-white transition-opacity
          ${hasPrev ? "opacity-100 hover:bg-black/70 cursor-pointer" : "opacity-30 cursor-not-allowed"}
        `}
        onClick={onPrev}
        disabled={!hasPrev}
        aria-label="上一张图片"
      >
        <ChevronLeft size={24} />
      </button>

      {/* 右侧按钮 */}
      <button
        type="button"
        className={`
          absolute right-4 top-6/17 -translate-y-1/2 z-20
          w-12 h-12 rounded-full
          bg-black/55 border border-white/20
          flex items-center justify-center
          text-white transition-opacity
          ${hasNext ? "opacity-100 hover:bg-black/70 cursor-pointer" : "opacity-30 cursor-not-allowed"}
        `}
        onClick={onNext}
        disabled={!hasNext}
        aria-label="下一张图片"
      >
        <ChevronRight size={24} />
      </button>
    </>
  );
});