import type { JSX } from "preact";
import { cn } from "../../utils/cn.ts";

export type CheckboxProps = JSX.IntrinsicElements["input"] & {
  label?: string;
};

export function Checkbox(props: CheckboxProps): JSX.Element {
  const { class: classProp, label, ...rest } = props;

  const className = cn("accent-blue-600 dark:accent-white", classProp);

  return (
    <label className="flex items-center gap-2 cursor-pointer">
      <input
        type="checkbox"
        class={className}
        style="color-scheme: light dark;"
        {...rest}
      />
      {label && (
        <span className="text-sm text-zinc-700 dark:text-zinc-300">
          {label}
        </span>
      )}
    </label>
  );
}