import { DetailedHTMLProps, InputHTMLAttributes } from 'react'

type ICheckbox = {
  value?: boolean
  label?: string
  className?: string
} & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'value'>

const Checkbox = ({ name, label, id, value = false, className, type, ...props }: ICheckbox) => {
  return (
    <div className={className}>
      <label htmlFor={id || name}>
        {label || name}
        <span className={value ? 'checked' : 'unchecked'} />
      </label>
      <input id={id || name} name={name} checked={value} type='checkbox' {...props} />
      <style jsx>{`
        input {
          display: none;
        }
        label {
          display: flex;
          align-items: center;
        }
        label span {
          position: relative;
          display: block;
          width: 1.2em;
          height: 1.2em;
          background: transparent;
          border: 2px solid black;
          margin-left: 0.4em;
        }
        label span.checked {
          border: 2px solid #005500;
        }

        label span::after,
        label span::before {
          display: block;
          content: '';
          position: absolute;
          height: 2px;
          left: 0;
          right: 0;
          top: 50%;
          vertical-align: middle;
          background-color: black;
          transition: all 250ms ease-in-out;
        }
        label span.checked::before,
        label span.checked::after {
          background-color: #005500;
        }

        label span::before {
          transform: translate(0, -50%) rotate(-45deg) scale(0);
        }
        label span::after {
          transform: translate(0, -50%) rotate(45deg) scale(0);
        }

        label span.checked::before {
          transform: translate(0, -50%) rotate(-45deg) scale(1);
        }
        label span.checked::after {
          transform: translate(0, -50%) rotate(45deg) scale(1);
        }
      `}</style>
    </div>
  )
}

export default Checkbox
