sexy/components/control/DeviceCard.tsx

"use client";

import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ActuatorSlider } from "./ActuatorSlider";
import type { ConnectedDeviceInfo } from "@/lib/buttplug/types";

interface DeviceCardProps {
  device: ConnectedDeviceInfo;
  actuatorValues: Record<number, number>;
  transmittingFeatureIndex: number | null;
  onActuatorChange: (featureIndex: number, value: number) => void;
  onStop: () => void;
}

export function DeviceCard({
  device,
  actuatorValues,
  transmittingFeatureIndex,
  onActuatorChange,
  onStop,
}: DeviceCardProps) {
  return (
    <Card className="bp-glass">
      <CardHeader className="flex flex-row items-center justify-between pb-3">
        <span className="text-sm font-medium text-foreground">{device.displayName ?? device.name}</span>
        <Button variant="outline" size="sm" onClick={onStop}>
          Stop
        </Button>
      </CardHeader>
      <div className="bp-hairline mx-4" />
      <CardContent className="flex flex-col gap-3 pt-3">
        {device.actuators.length === 0 ? (
          <p className="text-sm text-muted-foreground">No controllable actuators reported.</p>
        ) : (
          device.actuators.map((actuator) => (
            <ActuatorSlider
              key={actuator.featureIndex}
              actuator={actuator}
              value={actuatorValues[actuator.featureIndex] ?? 0}
              transmitting={transmittingFeatureIndex === actuator.featureIndex}
              onChange={(value) => onActuatorChange(actuator.featureIndex, value)}
            />
          ))
        )}
      </CardContent>
    </Card>
  );
}