"use client";

import { Slider } from "@/components/ui/slider";
import type { ActuatorInfo } from "@/lib/buttplug/types";

interface ActuatorSliderProps {
  actuator: ActuatorInfo;
  value: number;
  transmitting: boolean;
  onChange: (value: number) => void;
}

export function ActuatorSlider({ actuator, value, transmitting, onChange }: ActuatorSliderProps) {
  return (
    <div className="flex flex-col gap-2 rounded-md border border-border/70 bg-background/40 p-3">
      <div className="flex items-center justify-between text-xs">
        <span className="flex items-center gap-2 font-medium text-foreground">
          <span className="bp-led" data-on={transmitting} aria-hidden />
          {actuator.descriptor}
        </span>
        <span className="bp-readout text-sm text-muted-foreground data-[on=true]:text-primary" data-on={transmitting}>
          {Math.round(value * 100)}%
        </span>
      </div>
      <Slider value={[value * 100]} min={0} max={100} step={1} onValueChange={([v]) => onChange(v / 100)} />
    </div>
  );
}