// @design-system: primitives/Checkbox
// Registered at /design-system#checkbox-primitive - Phase 3 (Agent 3E) will render the gallery.

import * as RadixCheckbox from '@radix-ui/react-checkbox';
import { cn } from '@/lib/cn';

/** Props for the Checkbox component */
export type CheckboxProps = React.ComponentPropsWithoutRef<typeof RadixCheckbox.Root>;

/**
 * Multideal Checkbox primitive - wraps Radix Checkbox.
 *
 * @example
 * ```tsx
 * <Checkbox id="agree" checked={agreed} onCheckedChange={setAgreed} />
 * ```
 */
export function Checkbox({ className, ...props }: CheckboxProps) {
  return (
    <RadixCheckbox.Root
      className={cn(
        'peer h-5 w-5 shrink-0',
        'rounded-sm border border-neutral-300 bg-surface-base',
        'transition-colors',
        'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
        'disabled:cursor-not-allowed disabled:opacity-50',
        'data-[state=checked]:bg-brand-primary-600 data-[state=checked]:border-brand-primary-600',
        'data-[state=indeterminate]:bg-brand-primary-600 data-[state=indeterminate]:border-brand-primary-600',
        className,
      )}
      {...props}
    >
      <RadixCheckbox.Indicator className="flex items-center justify-center text-white">
        <CheckIcon />
      </RadixCheckbox.Indicator>
    </RadixCheckbox.Root>
  );
}

function CheckIcon() {
  return (
    <svg
      width="12"
      height="12"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="3"
      aria-hidden="true"
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}