'use client';

import * as React from 'react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { clsx } from 'clsx';
import { Check } from 'lucide-react';

export interface CheckboxProps extends React.ComponentPropsWithoutRef<
  typeof CheckboxPrimitive.Root
> {
  label?: React.ReactNode;
}

export const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  CheckboxProps
>(({ label, className, id, ...props }, ref) => {
  const generatedId = React.useId();
  const checkboxId = id ?? (label ? `checkbox-${generatedId}` : undefined);

  return (
    <label className="inline-flex items-center gap-2 text-sm text-[var(--bl-text-primary)]">
      <CheckboxPrimitive.Root
        ref={ref}
        id={checkboxId}
        className={clsx(
          'flex h-4 w-4 items-center justify-center rounded border border-[var(--bl-border)] bg-[var(--bl-surface-card)]',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bl-accent)]',
          'data-[state=checked]:border-[var(--bl-accent)] data-[state=checked]:bg-[var(--bl-accent)] data-[state=checked]:text-[var(--bl-accent-foreground,var(--bl-bg-canvas))]',
          className
        )}
        {...props}
      >
        <CheckboxPrimitive.Indicator>
          <Check className="h-3 w-3" />
        </CheckboxPrimitive.Indicator>
      </CheckboxPrimitive.Root>
      {label}
    </label>
  );
});

Checkbox.displayName = 'Checkbox';