supervisor-ui/components/logs/LogControls.tsx

'use client';

import { Play, Pause, RotateCcw, Download, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils/cn';

interface LogControlsProps {
  isPlaying: boolean;
  onPlayPause: () => void;
  autoScroll: boolean;
  onToggleAutoScroll: () => void;
  onRefresh: () => void;
  onClear?: () => void;
  onDownload?: () => void;
  isClearing?: boolean;
}

export function LogControls({
  isPlaying,
  onPlayPause,
  autoScroll,
  onToggleAutoScroll,
  onRefresh,
  onClear,
  onDownload,
  isClearing = false,
}: LogControlsProps) {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button
        variant={isPlaying ? 'destructive' : 'success'}
        size="sm"
        onClick={onPlayPause}
        title={isPlaying ? 'Pause auto-refresh' : 'Resume auto-refresh'}
      >
        {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
        {isPlaying ? 'Pause' : 'Play'}
      </Button>

      <Button
        variant={autoScroll ? 'default' : 'outline'}
        size="sm"
        onClick={onToggleAutoScroll}
        title={autoScroll ? 'Disable auto-scroll' : 'Enable auto-scroll'}
      >
        Auto-scroll
      </Button>

      <Button variant="outline" size="sm" onClick={onRefresh} title="Refresh logs now">
        <RotateCcw className="h-4 w-4" />
        Refresh
      </Button>

      {onDownload && (
        <Button variant="outline" size="sm" onClick={onDownload} title="Download logs">
          <Download className="h-4 w-4" />
          Download
        </Button>
      )}

      {onClear && (
        <Button
          variant="destructive"
          size="sm"
          onClick={onClear}
          disabled={isClearing}
          title="Clear logs"
        >
          <Trash2 className={cn('h-4 w-4', isClearing && 'animate-spin')} />
          Clear
        </Button>
      )}
    </div>
  );
}