'use client';

import { useRouter } from 'next/navigation';
import { ClipboardCheck } from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { ROUTES } from '@/utils/routes';

interface OpenRepairReviewActionProps {
  ticketId: string;
  hasPendingReview: boolean;
  pendingReviewCount: number;
}

export function OpenRepairReviewAction({
  ticketId,
  hasPendingReview,
  pendingReviewCount,
}: OpenRepairReviewActionProps) {
  const router = useRouter();
  const count = Math.max(0, pendingReviewCount ?? 0);

  return (
    <Button
      type="button"
      disabled={!hasPendingReview}
      title={
        hasPendingReview
          ? `${count} ${count === 1 ? 'repair is' : 'repairs are'} awaiting review`
          : 'No repairs are awaiting review'
      }
      onClick={() => router.push(ROUTES.TICKET_REVIEW(ticketId))}
    >
      <ClipboardCheck />
      Review Repairs
      <Badge
        variant="secondary"
        className="h-5 min-w-5 rounded-full px-1.5 font-semibold tabular-nums"
      >
        {count}
      </Badge>
    </Button>
  );
}