import { InputHTMLAttributes } from 'react'

import { T9n } from 'features/T9n'

import { Icon } from './Icon'
import {
  Wrapper,
  Input,
  Label,
} from './styled'

type Props = Pick<InputHTMLAttributes<HTMLInputElement>, (
  | 'checked'
  | 'className'
  | 'id'
  | 'name'
  | 'onChange'
  | 'onClick'
)> & {
  label?: string,
  labelLexic?: string,
}

export const Radio = ({
  checked,
  className,
  id,
  label = '',
  labelLexic,
  name,
  onChange,
  onClick,
}: Props) => (
  <Wrapper className={className}>
    <Label>
      <Input
        id={id}
        name={name}
        checked={checked}
        onClick={onClick}
        onChange={onChange}
      />
      <Icon checked={checked} />
      {labelLexic ? <T9n t={labelLexic} /> : label}
    </Label>
  </Wrapper>
)
