import React from "react";
import classNames from "classnames";
import { ReactComponent as Checkmark } from "assets/svg/check.svg";

export type Props = {
  /**
   * Control the state of checkbox
   */
  isChecked: boolean;
  /**
   * An Element next to the checkbox
   */
  children?: React.ReactNode;
} & Omit<React.HTMLProps<HTMLInputElement>, "type">;

const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
  return (
    <label
      className={classNames(
        "flex gap-x-4 flex-nowrap text-base text-black select-none",
        className
      )}
      htmlFor={props.id}
    >
      <div className="w-6 h-6 relative">
        <input
          className="peer appearance-none transition-colors bg-transparent border-2 border-gray-300 w-6 h-6 
                      rounded checked:bg-blue-500 checked:border-blue-500 
                      nextOnChecked:opacity-100 hover:border-blue-500 
                      focus:outline focus:outline-4 focus:outline-blue-300/40 focus:outline-offset-1 
                      disabled:bg-gray-75 disabled:border-gray-300 "
          type="checkbox"
          checked={isChecked}
          {...props}
        />
        <div //
          className=" w-4 h-3 leading-[0] absolute top-1.5 left-1 opacity-0 
                      pointer-events-none focus:pointer-events-auto flex items-center justify-center 
                      fill-white peer-disabled:fill-gray-500 "
        >
          <Checkmark className="fill-inherit" />
        </div>
      </div>
      {children}
    </label>
  );
};
export default Checkbox;