import React from "react";
import classNames from "classnames";
import { ReactComponent as Checkmark } from "../assets/svg/arrow-down.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="h-2 w-2 absolute top-0 left-0">
          <Checkmark className="h-6 w-6 fill-white hover:fill-white stroke-white" />
        </div>
      </div>
      {children}
    </label>
  );
};
export default Checkbox;