import React from 'react';
import { clsx } from 'clsx';

import { RadioGroupItem, RadioGroupItemProps } from './radio-group-item';
import { RadioGroupItemIndicator } from './radio-group-item-indicator';
import * as css from './radio.css';

export interface RadioProps extends RadioGroupItemProps {}

export const Radio = React.forwardRef<HTMLButtonElement, RadioProps>(
  function Radio({ children, className, ...props }, ref) {
    return (
      <RadioGroupItem
        {...props}
        ref={ref}
        className={clsx(className, css.item)}
      >
        <RadioGroupItemIndicator />

        <span>{children}</span>
      </RadioGroupItem>
    );
  },
);