import type { InputHTMLAttributes, ReactNode } from "react";
import { cn } from "../../lib/cn";

export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
  label?: ReactNode;
};

export function Checkbox({ className, label, ...props }: CheckboxProps) {
  return (
    <label className="inline-flex items-center gap-3">
      <span className="relative inline-flex h-5 w-5 shrink-0 items-center justify-center">
        <input
          className={cn(
            "peer absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none rounded-[calc(var(--uhuru-radius-sm)-2px)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] transition checked:border-[var(--uhuru-border-strong)] checked:bg-[var(--uhuru-action-primary)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--uhuru-border-accent)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60",
            className,
          )}
          type="checkbox"
          {...props}
        />
        <svg
          aria-hidden="true"
          className="pointer-events-none relative z-[1] h-3.5 w-3.5 scale-75 text-[var(--uhuru-text-inverse)] opacity-0 transition peer-checked:scale-100 peer-checked:opacity-100"
          fill="none"
          viewBox="0 0 20 20"
        >
          <path
            d="M4.75 10.5L8.25 14L15.25 6"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2.2"
          />
        </svg>
      </span>
      {label ? <span className="text-sm text-[var(--uhuru-text-primary)]">{label}</span> : null}
    </label>
  );
}