import { MemoryStick } from "lucide-react";
import type { CSSProperties } from "react";
import { Link } from "react-router-dom";
import type { DeviceGroup } from "../api/types";
import { colorToHex } from "../lib/utils";
import { Badge } from "./ui";

interface DeviceGroupCardProps {
  group: DeviceGroup;
  list?: boolean;
}

export function DeviceGroupCard({ group, list = false }: DeviceGroupCardProps) {
  const color = colorToHex(group.state.colors?.[0]);
  return <Link to={`/device-groups/${group.id}`} className={`${list ? "device-row" : "device-card"} device-card--group`}>
    <div className="device-card__visual" style={{ "--device-color": color } as CSSProperties}>
      <span className="device-glow" /><MemoryStick size={list ? 22 : 30} /><span className={`presence ${group.online_count ? "presence--online" : ""}`} />
    </div>
    <div className="device-card__content">
      <div className="device-card__title"><div><h2>{group.name}</h2><p>{group.vendor} · gegroepeerd RAM-apparaat</p></div><Badge tone="accent">Groep</Badge></div>
      <div className="device-card__meta"><Badge tone={group.online ? "success" : "warning"}>{group.online_count}/{group.module_count} online</Badge>{group.mixed ? <Badge tone="warning">Gemengde toestand</Badge> : null}</div>
      <div className={list ? "device-row__extra" : "device-card__footer"}><span>{group.state.mode ?? "Gemengd"}</span><span>{group.module_count} modules · {group.led_count} leds</span></div>
    </div>
  </Link>;
}