import { clsx } from 'clsx';

import Body from '../body/Body';
import { Typography } from '../common';
import RadioButton from '../common/RadioButton';
import { RadioButtonProps } from '../common/RadioButton/RadioButton';

export interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {
  avatar?: React.ReactNode;
  label: string;
  secondary?: string;
  className?: string;
}

export default function Radio<T extends string | number = ''>({
  label,
  id,
  disabled,
  className,
  avatar,
  secondary,
  ...otherProps
}: RadioProps<T>) {
  return (
    <div
      className={clsx(
        'radio np-radio',
        {
          'radio-lg': secondary,
          'radio-disabled': disabled,
        },
        className,
      )}
    >
      <label className={clsx({ disabled })} htmlFor={id}>
        <span className="m-r-2 np-radio-button">
          <RadioButton id={id} disabled={disabled} {...otherProps} />
        </span>
        <Body
          as="span"
          type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}
          className="np-radio__text"
        >
          {label}
          {secondary && <Body as="span">{secondary}</Body>}
        </Body>
        {avatar && <span className="np-radio__avatar m-l-auto">{avatar}</span>}
      </label>
    </div>
  );
}
