import React from 'react';
import styled from 'styled-components';
export const BasicSwitch = ({ title, className, onchange, checked }) => {
  return /*#__PURE__*/ React.createElement(
    Basicswitch,
    {
      className: className,
    },
    /*#__PURE__*/ React.createElement('input', {
      onChange: onchange ? () => onchange() : '',
      checked: checked,
      type: 'checkbox',
    }),
    /*#__PURE__*/ React.createElement(
      'span',
      {
        className: 'label',
      },
      title || ''
    ),
    /*#__PURE__*/ React.createElement('span', {
      className: 'switch',
    })
  );
};
const Basicswitch = styled.label`
  position: relative;
  display: flex;
  align-items: center;
  .label {
    margin-right: 1rem;
    font-family: var(--ff-medium);
    font-weight: 500;
    font-size: 1.4rem;
  }
  .switch {
    cursor: pointer;
    background-color: #c5c9da;
    border-radius: 10px;
    min-width: 39px;
    max-width: 39px;
    height: 20px;
    position: relative;
    display: block;
    &:before {
      content: '';
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      margin-left: 0.5px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      transition: all 0.3s ease;
    }
  }

  input {
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 100%;
  }
  input:checked ~ .switch {
    background-color: #00ba88;
    transition: all 0.3s ease-in-out;
  }
  input:checked ~ .switch:before {
    margin-left: 2rem;
    transition: all 0.3s ease-in-out;
  }
`;
