"use client";

import * as React from "react"

import { RadioGroup, RadioGroupItem } from "./radio-group"

export function RadioGroupDemo() {

const [value, setValue] = React.useState("default")

return (

<div className="w-full h-full flex items-center justify-center p-8">

<RadioGroup className="gap-3">

{["Default", "Comfortable", "Compact"].map((opt) => (

<label key={opt} className="flex items-center gap-3 cursor-pointer select-none">

<RadioGroupItem

name="density"

value={opt.toLowerCase()}

checked={value === opt.toLowerCase()}

onChange={() => setValue(opt.toLowerCase())}

/>

<span className="text-[14px] font-medium text-zinc-900 dark:text-zinc-200">{opt}</span>

</label>

))}

</RadioGroup>

</div>

)

}