Lofi_Generator/components/lofi-generator/TransportControls.tsx

'use client';

import { Button } from '@/components/ui/button';
import { Play, Pause, Shuffle } from 'lucide-react';

interface TransportControlsProps {
  isPlaying: boolean;
  isInitialized: boolean;
  onTogglePlayback: () => void;
  onGenerateNewBeat: () => void;
}

export function TransportControls({
  isPlaying,
  isInitialized,
  onTogglePlayback,
  onGenerateNewBeat,
}: TransportControlsProps) {
  return (
    <div className="flex items-center gap-4">
      <Button
        size="lg"
        onClick={onTogglePlayback}
        className="h-14 w-14 rounded-full"
      >
        {isPlaying ? (
          <Pause className="h-6 w-6" />
        ) : (
          <Play className="h-6 w-6 ml-1" />
        )}
      </Button>

      <Button
        variant="secondary"
        size="lg"
        onClick={onGenerateNewBeat}
        disabled={!isInitialized && !isPlaying}
        className="gap-2"
      >
        <Shuffle className="h-4 w-4" />
        New Beat
      </Button>
    </div>
  );
}