"use client";
import React, { useState } from "react";
import { RadioGroup } from "@smartacteam/ambient-web/radio-group";
export function RadioGroupDemo() {
const id1 = React.useId();
const id2 = React.useId();
const [value, setValue] = useState("comfortable");
return (
<div className="flex flex-col gap-6">
<RadioGroup.Root
aria-labelledby={id1}
value={value}
onValueChange={(value) => setValue(value as string)}
>
<label className="flex items-center gap-2">
<RadioGroup.Item value="default" />
<span className="text-sm">Default</span>
</label>
<label className="flex items-center gap-2">
<RadioGroup.Item value="comfortable" />
<span className="text-sm">Comfortable</span>
</label>
<label className="flex items-center gap-2">
<RadioGroup.Item value="compact" />
<span className="text-sm">Compact</span>
</label>
</RadioGroup.Root>
<RadioGroup.Root aria-labelledby={id2} defaultValue="option-1" disabled>
<label className="flex items-center gap-2">
<RadioGroup.Item value="option-1" />
<span className="text-sm text-text-secondary">
Disabled selected
</span>
</label>
<label className="flex items-center gap-2">
<RadioGroup.Item value="option-2" />
<span className="text-sm text-text-secondary">
Disabled option
</span>
</label>
</RadioGroup.Root>
</div>
);
}