1  import { MessageSquarePlus, Presentation, ChevronLeft, ChevronRight } from 'lucide-react';
 2  import { Button } from '@/components/ui/button';
 3  import { Badge } from '@/components/ui/badge';
 4  import { Progress } from '@/components/ui/progress';
 5  import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 6  
 7  interface Props {
 8    current: number;
 9    total: number;
10    onPrev: () => void;
11    onNext: () => void;
12    commentCount?: number;
13    onSubmitReview?: () => void;
14  }
15  
16  export function SlideNav({ current, total, onPrev, onNext, commentCount = 0, onSubmitReview }: Props) {
17    const isOverview = current === 0;
18    const progress = isOverview ? 0 : total > 1 ? ((current - 1) / (total - 1)) * 100 : 100;
19  
20    return (
21      <div className="border-t">
22        <Progress value={progress} className="h-1 rounded-none" />
23        <div className="flex items-center justify-between px-6 py-4">
24          <Tooltip>
25            <TooltipTrigger asChild>
26              <Button variant="outline" onClick={onPrev} disabled={isOverview} size="sm" className="gap-1">
27                <ChevronLeft className="h-4 w-4" />
28                Prev
29              </Button>
30            </TooltipTrigger>
31            <TooltipContent>Previous slide (←)</TooltipContent>
32          </Tooltip>
33  
34          <span className="text-sm text-muted-foreground flex items-center gap-1.5">
35            <Presentation className="h-3.5 w-3.5" />
36            {isOverview ? 'Overview' : `${current} / ${total}`}
37          </span>
38  
39          <div className="flex items-center gap-2">
40            {onSubmitReview && (
41              <Button variant="outline" size="sm" onClick={onSubmitReview} className="gap-1.5">
42                <MessageSquarePlus className="h-3.5 w-3.5" />
43                Submit review
44                {commentCount > 0 && (
45                  <Badge variant="secondary" className="ml-0.5 h-5 min-w-[20px] px-1.5 text-xs">
46                    {commentCount}
47                  </Badge>
48                )}
49              </Button>
50            )}
51            <Tooltip>
52              <TooltipTrigger asChild>
53                <Button variant="outline" onClick={onNext} disabled={current >= total} size="sm" className="gap-1">
54                  Next
55                  <ChevronRight className="h-4 w-4" />
56                </Button>
57              </TooltipTrigger>
58              <TooltipContent>Next slide (→)</TooltipContent>
59            </Tooltip>
60          </div>
61        </div>
62      </div>
63    );
64  }