import React from 'react';
import { SilkeBox } from '../silke-box';
import { SilkeText } from '../silke-text';
import { SilkeRadioButton } from './silke-radio-button';

type TextSize = 'micro' | 'small' | 'base' | 'large';

type SilkeRadioButtonGroupProps = {
  name: string;
  label?: React.ReactNode;
  items: { label: string | React.ReactNode; value: any }[];
  required?: boolean;
  help?: React.ReactNode;
  size?: TextSize;
};

export function SilkeRadioButtonGroup({
  label,
  name,
  items,
  required,
  help,
  size,
}: SilkeRadioButtonGroupProps) {
  return (
    <SilkeBox column gap="xs">
      {label && (
        <SilkeText size={size} tag="strong" weight="strong">
          {label}
        </SilkeText>
      )}
      <SilkeBox column gap={!size || ['base', 'large'].includes(size) ? 'xs' : undefined}>
        {items?.map((item, i) => (
          <SilkeRadioButton key={i} {...item} required={required} name={name} size={size} />
        ))}
      </SilkeBox>
      {help && (
        <SilkeText size={size} tag="span" flex color="neutral-80">
          {help}
        </SilkeText>
      )}
    </SilkeBox>
  );
}