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";
import { Battery, BatteryFull, BatteryLow, BatteryMedium, BatteryWarning, Unlink } from "lucide-react";

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

function BatteryIndicator({ level }: { level: number }) {
  const Icon = level < 0.15 ? BatteryWarning : level < 0.4 ? BatteryLow : level < 0.8 ? BatteryMedium : BatteryFull;
  return (
    <span className={`flex items-center gap-1 ${level < 0.15 ? "text-destructive" : "text-muted-foreground"}`}>
      <Icon className="size-3.5" />
      <span className="bp-readout text-xs">{Math.round(level * 100)}%</span>
    </span>
  );
}

export function DeviceCard({
  device,
  batteryLevel,
  actuatorValues,
  transmittingFeatureIndex,
  onActuatorChange,
  onStop,
  onDisconnect,
}: 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>
        <div className="flex items-center gap-3">
          {device.hasBattery &&
            (batteryLevel !== null ? (
              <BatteryIndicator level={batteryLevel} />
            ) : (
              <Battery className="size-3.5 text-muted-foreground" aria-label="Reading battery level" />
            ))}
          <Button variant="outline" size="sm" onClick={onStop}>
            Stop
          </Button>
          <Button variant="ghost" size="icon-sm" onClick={onDisconnect} aria-label="Disconnect device">
            <Unlink className="size-3.5" />
          </Button>
        </div>
      </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>
  );
}