import { CheckCircleIcon, XCircleIcon, CoffeeIcon } from "@phosphor-icons/react/dist/ssr";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

const options = [
  { v: "setuju", l: "Setuju", Icon: CheckCircleIcon, tone: "text-success" },
  { v: "tidak", l: "Tidak setuju", Icon: XCircleIcon, tone: "text-danger" },
  { v: "abstain", l: "Abstain (lagi ngopi)", Icon: CoffeeIcon, tone: "text-on-surface-muted" },
];

export default function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="setuju" aria-label="Voting" className="w-full max-w-xs">
      {options.map(({ v, l, Icon, tone }) => (
        <Label
          key={v}
          htmlFor={`rg-${v}`}
          className="flex cursor-pointer items-center gap-3 rounded-[1.4rem] bg-surface px-4 py-3 font-semibold shadow-clay-sm"
        >
          <RadioGroupItem value={v} id={`rg-${v}`} />
          <Icon weight="bold" className={`size-5 ${tone}`} />
          {l}
        </Label>
      ))}
    </RadioGroup>
  );
}
Installation
