'use client';

import { Slider } from '@/components/ui/slider';
import { Label } from '@/components/ui/label';

interface VolumeControlProps {
  label: string;
  value: number;
  onChange: (value: number) => void;
  className?: string;
}

export function VolumeControl({
  label,
  value,
  onChange,
  className = '',
}: VolumeControlProps) {
  return (
    <div className={`space-y-2 ${className}`}>
      <div className="flex items-center justify-between">
        <Label className="text-sm text-muted-foreground">{label}</Label>
        <span className="text-xs text-muted-foreground font-mono">
          {Math.round(value * 100)}%
        </span>
      </div>
      <Slider
        value={[value]}
        onValueChange={([v]) => onChange(v)}
        min={0}
        max={1}
        step={0.01}
        className="w-full"
      />
    </div>
  );
}