import React from "react";
import { textColor } from "../../data/getColorBasedOnMode";
import { getSizeStyles } from "../../data/getInputSizes";

interface CheckboxProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
  label?: string;
  size?: "small" | "medium" | "large";
}

const Checkbox: React.FC<CheckboxProps> = ({
  label,
  checked,
  onChange,
  disabled,
  size,
  ...rest
}) => {
  return (
    <div className={"flex items-center"}>
      <label className="inline-flex items-center space-x-2 cursor-pointer select-none">
        <span className="relative inline-flex items-center">
          <input
            type="checkbox"
            checked={checked}
            onChange={onChange}
            disabled={disabled}
            className={`${getSizeStyles(size).check} cursor-pointer
            appearance-none border-1 rounded 
            checked:border-primary-600 border-dark-300 bg-gray-100 dark:border-gray-50 checked:bg-primary-600
            checked:border-none focus:outline-none 
            disabled:cursor-not-allowed disabled:opacity-50
            peer
          `}
            {...rest}
          />
          <svg
            className={` ${getSizeStyles(size).check}  ${textColor}
            absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none
            hidden peer-checked:block text-white
          `}
            viewBox="1 1 24 20"
            fill="none"
            stroke="currentColor"
            strokeWidth="3"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </span>
        {label && (
          <span
            className={`${size === "small" ? "text-xs" : "text-sm"} ${
              disabled ? "text-dark-400 cursor-not-allowed" : textColor
            }`}
          >
            {label}
          </span>
        )}
      </label>
    </div>
  );
};

export default Checkbox;
