import React from 'react';
import { Box } from './Box';
import { Text } from './Text';

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

export function Checkbox({ label, checked, onChange, disabled }: CheckboxProps) {
  return (
    <Box as="label" display="flex" alignItems="center" gap={2} cursor={disabled ? 'not-allowed' : 'pointer'}>
      <Box
        as="input"
        type="checkbox"
        checked={checked}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}
        disabled={disabled}
        w="4"
        h="4"
        bg="bg-deep-graphite"
        border
        borderColor="border-charcoal-outline"
        rounded="sm"
        className="text-primary-blue focus:ring-primary-blue"
      />
      <Text size="sm" color={disabled ? 'text-gray-500' : 'text-white'}>{label}</Text>
    </Box>
  );
}