'use client';

import { Toggle } from '@/components/ui/toggle';
import { VolumeControl } from './VolumeControl';
import { Volume2, VolumeX, Drum, Music, Cloud } from 'lucide-react';
import { LayerName } from '@/types/audio';

interface LayerMixerProps {
  volumes: {
    drums: number;
    chords: number;
    ambient: number;
  };
  muted: {
    drums: boolean;
    chords: boolean;
    ambient: boolean;
  };
  onVolumeChange: (layer: LayerName, volume: number) => void;
  onToggleMute: (layer: LayerName) => void;
}

const layers: { name: LayerName; label: string; icon: React.ReactNode }[] = [
  { name: 'drums', label: 'Drums', icon: <Drum className="h-4 w-4" /> },
  { name: 'chords', label: 'Chords', icon: <Music className="h-4 w-4" /> },
  { name: 'ambient', label: 'Ambient', icon: <Cloud className="h-4 w-4" /> },
];

export function LayerMixer({
  volumes,
  muted,
  onVolumeChange,
  onToggleMute,
}: LayerMixerProps) {
  return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
        Layers
      </h3>
      <div className="space-y-4">
        {layers.map(({ name, label, icon }) => (
          <div key={name} className="flex items-center gap-3">
            <Toggle
              pressed={!muted[name]}
              onPressedChange={() => onToggleMute(name)}
              size="sm"
              className="shrink-0"
              aria-label={`Toggle ${label}`}
            >
              {muted[name] ? (
                <VolumeX className="h-4 w-4" />
              ) : (
                <Volume2 className="h-4 w-4" />
              )}
            </Toggle>
            <div className="flex items-center gap-2 shrink-0 w-20">
              {icon}
              <span className="text-sm">{label}</span>
            </div>
            <VolumeControl
              label=""
              value={volumes[name]}
              onChange={(v) => onVolumeChange(name, v)}
              className="flex-1"
            />
          </div>
        ))}
      </div>
    </div>
  );
}