import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';  
import { X } from 'lucide-react'; 
import { Button } from '@/components/ui/button';

interface SliderWithInputProps {
  label: string;
  value?: number;
  onChange: (value?: number) => void;
  min: number;
  max: number;
  step: number;
  unit?: string;
}

export function SliderWithInput({ label, value, onChange, min, max, step, unit = '' }: SliderWithInputProps) {
  return (
    <div className='space-y-2'>
      <Label>{label}</Label>
      <div className='flex gap-2'>
        <Slider
          value={[value ?? min]}
          min={min}
          max={max}
          step={step}
          onValueChange={([val]) => onChange(val)}
          className='flex-1'
        />
        <Input
          type='number'
          value={value}
          onChange={(e) => onChange(Number(e.target.value))}
          min={min}
          max={max}
          step={step}
        />
        {unit && <span className='text-sm text-neutral-400 w-6'>{unit}</span>}
        <Button
          variant="ghost"
          size="icon"
          onClick={() => onChange(undefined)}
          className="text-muted-foreground pl-0"
        >
          <X size={16} />
        </Button>
      </div>
    </div>
  );
}
