import { useContext } from 'react';
import RadioButton, { type RadioButtonProps } from '../../common/RadioButton/RadioButton';
import { useListItemControl } from '../useListItemControl';
import { ListItemContext } from '../ListItemContext';

export type ListItemRadioProps = Omit<
  RadioButtonProps,
  'disabled' | 'readOnly' | 'className' | 'id'
>;

/**
 * This component allows for rendering a Button control. It's a thin wrapper around the
 * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only
 * a subset of its features in line with the ListItem's constraints. <br />
 * <br />
 * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.
 */
export const Radio = function (props: ListItemRadioProps) {
  const { baseItemProps } = useListItemControl('radio', { ...props });
  const { ids, describedByIds } = useContext(ListItemContext);

  return (
    <RadioButton
      {...props}
      aria-describedby={describedByIds}
      className="wds-list-item-control"
      disabled={baseItemProps.disabled}
      id={ids.control}
    />
  );
};

Radio.displayName = 'ListItem.Radio';