import React, { ReactNode } from 'react'

import {
  Group,
  RadioWrapper,
  Label,
  Input,
} from './styled'

type Props<T> = {
  children: ReactNode,
  defaultChecked?: boolean,
  name?: string,
  onChange?: (value: T) => void,
  value: T,
}

export const RadioButton = <T extends string>({
  children,
  defaultChecked,
  name,
  onChange,
  value,
}: Props<T>) => (
  <RadioWrapper>
    <Label htmlFor={`${name}_${value}`}>
      {children}
    </Label>
    <Input
      id={`${name}_${value}`}
      name={name}
      value={value}
      defaultChecked={defaultChecked}
      onChange={(e) => onChange?.(e.target.value as T)}
    />
  </RadioWrapper>
)

type RadioGroupProps = {
  children: ReactNode,
}

export const RadioGroup = ({ children }: RadioGroupProps) => (
  <Group>
    {children}
  </Group>
)
