دکمه رادیویی

import { useState } from "react";
import { RadioButton } from "@/components/ui/radio-button.tsx";
import { useLogger } from "@/components/pages/tests/experiment.tsx";

const OPTIONS = [
  { value: "light", label: "روشن" },
  { value: "dark", label: "تیره" },
  { value: "auto", label: "خودکار" },
];

export function RadioButtonDemo() {
  const [value, setValue] = useState("auto");
  const { log } = useLogger();

  return (
    <div className="flex flex-wrap gap-4">
      {OPTIONS.map((option) => (
        <RadioButton
          key={option.value}
          name="theme-demo"
          label={option.label}
          value={option.value}
          checked={value === option.value}
          onChange={() => {
            setValue(option.value);
            log("select", option.value);
          }}
        />
      ))}
    </div>
  );
}