import { ColoredTextWithBG } from '../colored-text-with-bg';
import { RadioProps } from '../@forms/radio';
import { StyledBillingOption, StyledRadio } from './styles';
import { BillingOptionProps } from './types';

const defaultColorObj: BillingOptionProps['badgeColorObj'] = {
  backgroundColor: '#44D7B6',
  color: 'white'
};

export function BillingOption({
  label,
  badgeLabel,
  badgeColorObj = defaultColorObj,
  checked,
  radioProps,
  onClick
}: BillingOptionProps) {
  const formControlLabelProps: RadioProps['formControlLabelProps'] = {
    label,
    ...radioProps?.formControlLabelProps
  };

  return (
    <StyledBillingOption selected={checked} onClick={onClick}>
      <StyledRadio
        checked={checked}
        formControlLabelProps={formControlLabelProps}
        {...radioProps}
      />
      {badgeLabel && <ColoredTextWithBG content={badgeLabel} colorObj={badgeColorObj} />}
    </StyledBillingOption>
  );
}

export default BillingOption;