import { ChevronDown, ChevronUp, MessageSquareText, ThumbsUp } from "lucide-react";
import type { Neighbors } from "../types.ts";

interface NavigationButtonsProps {
  neighbors: Neighbors;
  commentsCount: number;
  likesCount: number;
  onNavigatePrev: () => void;
  onNavigateNext: () => void;
  onToggleComments: () => void;
}

export function NavigationButtons({
  neighbors,
  commentsCount,
  likesCount,
  onNavigatePrev,
  onNavigateNext,
  onToggleComments,
}: NavigationButtonsProps) {
  return (
    <>
      <div className="absolute right-4 top-8/14 flex flex-col items-center gap-8 z-10">
        <button
          className="grid place-items-center w-[54px] h-[54px] rounded-full -translate-y-1/2"
        >
          <div className="grid place-items-center gap-1 drop-shadow-lg">
            <ThumbsUp size={40} className="" />

            <span className="text-[16px] font-semibold text-white/90 drop-shadow">{likesCount}</span>

          </div>
        </button>
        {/* 评论开关（右侧中部） */}
        <button
          className="grid place-items-center w-[54px] h-[54px] rounded-full -translate-y-1/2 cursor-pointer"
          onClick={onToggleComments}
          aria-label="切换评论"
        >
          <div className="grid place-items-center gap-1 drop-shadow-lg">
            <MessageSquareText size={40} className="" />

            {commentsCount > 0 ? <span className="text-[16px] font-semibold text-white/90 drop-shadow">{commentsCount}</span> :
              <span className="text-[12px] font-semibold text-white/90 drop-shadow">暂无评论</span>
            }

          </div>
        </button>

      </div>

      {/* 上下切换按钮（右侧胶囊形状） */}
      <div className="absolute right-4 top-5/11 -translate-y-1/2 z-10">
        <div className="flex flex-col rounded-full bg-black/40 backdrop-blur-sm border border-white/20 overflow-hidden">
          <button
            className="w-[44px] h-[44px] inline-flex items-center justify-center text-white disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed hover:bg-white/10 transition-colors"
            onClick={onNavigatePrev}
            disabled={!neighbors.prev}
            aria-label="上一条"
          >
            <ChevronUp size={24} />
          </button>
          <button
            className="w-[44px] h-[44px] inline-flex items-center justify-center text-white disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed hover:bg-white/10 transition-colors border-t border-white/20"
            onClick={onNavigateNext}
            disabled={!neighbors.next}
            aria-label="下一条"
          >
            <ChevronDown size={24} />
          </button>
        </div>
      </div>
    </>
  );
}