import styled from "styled-components";

const Radio = ({ checked, onChange, color, defaultBorderColor }) => {
  return (
    <RadioInput
      checked={checked}
      active={checked}
      onChange={onChange}
      color={color}
      defaultBorderColor={defaultBorderColor}
    />
  );
};

const RadioInput = styled.input.attrs({ type: "radio" })`
  appearance: none;
  background-color: #fff;
  margin: 0;
  color: ${({ color }) => color || "#febf10"};
  width: 20px;
  height: 20px;
  border: 2px solid
    ${({ color, active, defaultBorderColor }) =>
      active ? color : defaultBorderColor ? defaultBorderColor : "#febf10"};
  border-radius: 50%;
  transform: translateY(-0.075em);
  cursor: pointer;
  display: grid;
  place-content: center;

  &::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em ${({ color }) => color || "#febf10"};
  }

  &:checked::before {
    transform: scale(1);
  }
`;

export default Radio;
