import styled from "styled-components";
import {
  blueDark600,
  whiteBackground,
  blueLighter,
  grayBase,
} from "../constants";

interface CustomToggleProps {
  disabled?: boolean;
  checked?: boolean;
}

export const ToggleLabel = styled.label`
  display: flex;
  align-items: center;
  cursor: pointer;
`;

export const ToggleDiv = styled.div<CustomToggleProps>`
  margin-top: 12px;
  position: relative;
  width: 39px;
  height: 20px;
  background: ${whiteBackground};
  border: 1px solid ${(props) => (props.disabled ? blueLighter : blueDark600)};
  border-radius: 40px;
  transition: 300ms all;
  cursor: ${(props) => (props.disabled ? "not-allowed" : "")};
  &:before {
    transition: 300ms all;
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 50%;
    left: 1px;
    background: ${(props) =>
      props.disabled
        ? blueLighter
        : props.checked
        ? whiteBackground
        : blueDark600};
    transform: translate(0, -50%);
  }
`;

export const ToggleInput = styled.input`
  opacity: 0;
  position: absolute;
  &:checked + ${ToggleDiv} {
    background: ${blueDark600};
    &:before {
      transform: translate(19px, -50%);
    }
  }
`;

export const ToggleText = styled.span`
  font-family: "Jost", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: ${grayBase};
`;
