CedarCopilot/cedar-mail

/**
 * ReviewModeBottomBar Component
 *
 * Bottom navigation bar for canvas review mode showing:
 * - Draft position (1 of 3)
 * - Navigation controls (left/right arrows)
 * - Keyboard shortcuts legend
 * - Action buttons (Accept/Reject)
 */

import { ChevronLeft, ChevronRight, X, Check } from 'lucide-react';
import { EnterKey } from '@/components/ui/enter-key';
import { Button } from '@/components/ui/button';
import { Kbd } from '@/components/ui/kbd';

export interface ReviewModeBottomBarProps {
  currentIndex: number;
  totalDrafts: number;
  onPrevious: () => void;
  onNext: () => void;
  onAccept: () => void;
  onReject: () => void;
}

export function ReviewModeBottomBar({
  currentIndex,
  totalDrafts,
  onPrevious,
  onNext,
  onAccept,
  onReject,
}: ReviewModeBottomBarProps) {
  return (
    <div className="flex items-center justify-between bg-raised px-6 py-4">
      {/* Center: Navigation */}
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-1">
          <Button
            variant="ghost"
            size="sm"
            onClick={onPrevious}
            disabled={currentIndex === 0}
            className="h-8 px-2"
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="sm"
            onClick={onNext}
            disabled={currentIndex === totalDrafts - 1}
            className="h-8 px-2"
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
          <span className="mx-2 text-xs text-muted-foreground">
            {currentIndex + 1} of {totalDrafts}
          </span>
        </div>

        <div className="h-4 w-px bg-border" />

        {/* Keyboard hints */}
        <div className="flex items-center gap-3 text-xs text-muted-foreground">
          <div className="flex items-center gap-1.5">
            <Kbd>←→</Kbd>
            <span>navigate</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Kbd>
              ⌘ <EnterKey />
            </Kbd>
            <span>save</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Kbd>⌘ ⌫</Kbd>
            <span>reject</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Kbd>esc</Kbd>
            <span>exit</span>
          </div>
        </div>
      </div>

      {/* Right: Actions */}
      <div className="flex items-center gap-2">
        <Button
          variant="ghost"
          size="sm"
          onClick={onReject}
          className="text-muted-foreground hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950/50"
        >
          <X className="mr-1.5 h-4 w-4" />
          Reject
        </Button>
        <Button size="sm" onClick={onAccept}>
          <Check className="mr-1.5 h-4 w-4" />
          Save Draft For Later
        </Button>
      </div>
    </div>
  );
}