import Option from '../common/Option';
import RadioButton from '../common/RadioButton';
import { RadioButtonProps } from '../common/RadioButton/RadioButton';

export interface RadioOptionProps<T extends string | number = string>
  extends
    Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,
    Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {
  'aria-label'?: string;
  media?: React.ReactNode;
  title: React.ReactNode;
  content?: React.ReactNode;
  complex?: boolean;
  showMediaCircle?: boolean;
  showMediaAtAllSizes?: boolean;
  isContainerAligned?: boolean;
}

/**
 * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 * @deprecatedSince 46.104.0
 * @see [Source](../listItem/ListItem.tsx)
 * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
 * @see [Design docs](https://wise.design/components/list-item)
 * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
 */
function RadioOption<T extends string | number = ''>({
  'aria-label': ariaLabel,
  media,
  title,
  content,
  id,
  name,
  checked,
  onChange,
  complex,
  disabled,
  value = '' as T,
  showMediaCircle,
  showMediaAtAllSizes,
  isContainerAligned,
}: RadioOptionProps<T>) {
  return (
    <Option
      aria-label={ariaLabel}
      media={media}
      title={title}
      content={content}
      name={name}
      complex={complex}
      disabled={disabled}
      showMediaCircle={showMediaCircle}
      showMediaAtAllSizes={showMediaAtAllSizes}
      isContainerAligned={isContainerAligned}
      button={
        <RadioButton
          id={id}
          name={name}
          checked={checked}
          disabled={disabled}
          value={value}
          onChange={onChange}
        />
      }
    />
  );
}

export default RadioOption;