import { ChangeEvent, forwardRef } from 'react';
import { Box } from './Box';
import { Text } from './Text';

export interface CheckboxProps {
  label: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  error?: string;
}

export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ 
  label, 
  checked, 
  onChange, 
  disabled = false,
  error
}, ref) => {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.checked);
  };

  return (
    <Box>
      <Box as="label" display="flex" alignItems="center" gap={2} style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}>
        <input
          ref={ref}
          type="checkbox"
          checked={checked}
          onChange={handleChange}
          disabled={disabled}
          className="w-4 h-4 rounded-none border-[var(--ui-color-border-default)] bg-[var(--ui-color-bg-surface)] text-[var(--ui-color-intent-primary)] focus:ring-[var(--ui-color-intent-primary)]"
        />
        <Text size="sm" variant={disabled ? 'low' : 'high'}>
          {label}
        </Text>
      </Box>
      {error && (
        <Box marginTop={1}>
          <Text size="xs" variant="critical">
            {error}
          </Text>
        </Box>
      )}
    </Box>
  );
});

Checkbox.displayName = 'Checkbox';