import { JSX } from "preact";

interface CheckboxProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
}

export default function Checkbox({
  label,
  className = "",
  ...props
}: CheckboxProps) {
  const checkboxClasses = `w-4 h-4 ${className}`;

  if (label) {
    return (
      <label className="flex items-center">
        <input type="checkbox" className={checkboxClasses} {...props} />
        {label && <span className="ml-2 dark:text-gray-100">{label}</span>}
      </label>
    );
  }

  return <input type="checkbox" className={checkboxClasses} {...props} />;
}
