Radio group

'use client';
import { useState } from 'react';
import { RadioGroup, RadioGroupItem } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "mode": "vertical",
    "disabled": false
  };
  const [value, setValue] = useState('0');
  const items = ['A', 'B', 'C'];
  return (
    <RadioGroup
      orientation={settings.mode as 'vertical' | 'horizontal'}
      style={{
        display: 'flex',
        flexDirection: settings.mode === 'horizontal' ? 'row' : 'column',
      }}
      value={value}
      onValueChange={setValue}
      disabled={settings.disabled}
      aria-label={"옵션 선택"}
    >
      {items.map((label, index) => (
        <label
          key={index}
          style={{ display: 'flex', gap: 10, alignItems: 'center', margin: 12 }}
        >
          <RadioGroupItem value={String(index)} />
          {label}
        </label>
      ))}
    </RadioGroup>
  );
}