import type { InputHTMLAttributes, ReactNode } from "react";
import { forwardRef } from "react";

interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
  label?: ReactNode;
  error?: string;
}

const Checkbox = forwardRef<HTMLInputElement, Props>(function Checkbox(
  { label, error, className = "", id, ...rest },
  ref,
) {
  const inputId = id ?? rest.name;
  return (
    <div>
      <label className="flex items-start gap-2 cursor-pointer" htmlFor={inputId}>
        <input
          {...rest}
          ref={ref}
          id={inputId}
          type="checkbox"
          className={[
            "mt-0.5 h-4 w-4 rounded border border-brand-lines/40",
            "bg-brand-bgLight/40 text-brand-accent",
            "focus:outline-none focus:ring-2 focus:ring-brand-accent/40",
            "accent-brand-accent",
            error ? "border-red-500/60" : "",
            className,
          ].join(" ")}
        />
        {label && (
          <span className="text-sm text-brand-text/90 select-none">{label}</span>
        )}
      </label>
      {error && <span className="mt-1 block text-xs text-red-400">{error}</span>}
    </div>
  );
});

export default Checkbox;
