import React from 'react';
import styled from 'styled-components';
import RadioButtonCheckIcon from '../../assets/icons/RadioButtonCheckIcon';
import { RadioInputProps, fonts } from './types';

function RadioButton(props: RadioInputProps) {
  return (
    <RadioContainer>
      {props.checked && <RadioButtonCheckIcon color={props.color} />}
      <Input className="appearance" type="radio" {...props} />
      <Label htmlFor={props.id}>{props.label}</Label>
    </RadioContainer>
  );
}

const Label = styled.label`
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  font-family: ${fonts.secondary};
  color: #aea9a1;
  white-space: nowrap;
`;

const Input = styled.input<{ color?: string }>`
  appearance: none;
  margin: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #aea9a1;
  border-radius: 14px;
  cursor: pointer;

  &:checked {
    & + ${Label} {
      color: ${props => props.color || '#6396e5'};
    }
    display: none;
  }

  &::after {
    content: '';
    display: block;
    border-radius: 14px;
    width: 12px;
    height: 12px;
    margin: 2px;
  }

  &:checked::after {
    background-color: ${props => props.color || '#6396e5'};
  }
`;

const RadioContainer = styled.div`
  display: flex;
  gap: 5px;
  align-items: center;
`;

export default RadioButton;
