chat_room/admin/src/components/ui/Controls.tsx

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";
import { Check } from "lucide-react";

interface SwitchProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export function Switch({ label, defaultChecked = false, onChange }: SwitchProps) {
  const [checked, setChecked] = useState(defaultChecked);
  return (
    <label className="inline-flex items-center gap-3 cursor-pointer select-none">
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        onClick={() => {
          setChecked((c) => !c);
          onChange?.(!checked);
        }}
        className={cn(
          "relative h-7 w-12 rounded-full transition-colors duration-200 shrink-0",
          checked ? "bg-(--color-brand-500)" : "bg-(--color-bg-tertiary)"
        )}
      >
        <span
          className={cn(
            "absolute top-1 left-1 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200",
            checked ? "translate-x-5" : "translate-x-0"
          )}
        />
      </button>
      {label && <span className="text-[14px] text-(--color-content-primary)">{label}</span>}
    </label>
  );
}

interface CheckboxProps {
  label?: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

export function Checkbox({ label, defaultChecked = false, onChange }: CheckboxProps) {
  const [checked, setChecked] = useState(defaultChecked);
  return (
    <label className="inline-flex items-center gap-2.5 cursor-pointer select-none">
      <button
        type="button"
        role="checkbox"
        aria-checked={checked}
        onClick={() => {
          setChecked((c) => !c);
          onChange?.(!checked);
        }}
        className={cn(
          "h-6 w-6 rounded-(--radius-xs) flex items-center justify-center transition-all duration-150 shrink-0 border-2",
          checked
            ? "bg-(--color-brand-500) border-(--color-brand-500)"
            : "bg-(--color-surface-default) border-(--color-border-default)"
        )}
      >
        {checked && <Check size={15} className="text-white" strokeWidth={3} />}
      </button>
      {label && <span className="text-[14px] text-(--color-content-primary)">{label}</span>}
    </label>
  );
}

interface RadioGroupProps {
  options: { value: string; label: string }[];
  defaultValue?: string;
  onChange?: (value: string) => void;
}

export function RadioGroup({ options, defaultValue, onChange }: RadioGroupProps) {
  const [value, setValue] = useState(defaultValue ?? options[0]?.value);
  return (
    <div className="flex flex-col gap-3">
      {options.map((opt) => {
        const selected = value === opt.value;
        return (
          <label
            key={opt.value}
            className="inline-flex items-center gap-2.5 cursor-pointer select-none"
          >
            <button
              type="button"
              role="radio"
              aria-checked={selected}
              onClick={() => {
                setValue(opt.value);
                onChange?.(opt.value);
              }}
              className={cn(
                "h-5 w-5 rounded-full flex items-center justify-center border-2 transition-colors shrink-0",
                selected ? "border-(--color-brand-500)" : "border-(--color-border-default)"
              )}
            >
              {selected && <span className="h-2.5 w-2.5 rounded-full bg-(--color-brand-500)" />}
            </button>
            <span className="text-[14px] text-(--color-content-primary)">{opt.label}</span>
          </label>
        );
      })}
    </div>
  );
}