import styled from 'styled-components/macro'

import { svgColorStyles } from '../Checkbox/Icon'

export const RadioSvg = styled.svg`
  margin-right: 22px;

  ${svgColorStyles}
`

type Props = {
  checked?: boolean,
}

export const Icon = ({ checked }: Props) => {
  const id = checked ? '#radio-checked' : '#radio-unchecked'
  return (
    <RadioSvg
      width='25'
      height='26'
      viewBox='0 0 25 26'
      checked={checked}
      xmlns='http://www.w3.org/2000/svg'
    >
      <use href={id} />
      <defs>
        <path
          id='radio-checked'
          d='M12.375 0.75C19.2095 0.75 24.75 6.29048 24.75 13.125C24.75 19.9595 19.2095 25.5 12.375 25.5C5.54048 25.5 0 19.9595 0 13.125C0 6.29048 5.54048 0.75 12.375 0.75ZM12.375 3C6.78312 3 2.25 7.53312 2.25 13.125C2.25 18.7169 6.78312 23.25 12.375 23.25C17.9669 23.25 22.5 18.7169 22.5 13.125C22.5 7.53312 17.9669 3 12.375 3ZM12.375 5.25C16.7242 5.25 20.25 8.77576 20.25 13.125C20.25 17.4742 16.7242 21 12.375 21C8.02576 21 4.5 17.4742 4.5 13.125C4.5 8.77576 8.02576 5.25 12.375 5.25Z'
        />

        <path
          id='radio-unchecked'
          d='M12.375 0C19.2095 0 24.75 5.54048 24.75 12.375C24.75 19.2095 19.2095 24.75 12.375 24.75C5.54048 24.75 0 19.2095 0 12.375C0 5.54048 5.54048 0 12.375 0ZM12.375 2.25C6.78312 2.25 2.25 6.78312 2.25 12.375C2.25 17.9669 6.78312 22.5 12.375 22.5C17.9669 22.5 22.5 17.9669 22.5 12.375C22.5 6.78312 17.9669 2.25 12.375 2.25Z'
        />
      </defs>
    </RadioSvg>
  )
}