import { Box } from './Box';
import { Button } from './Button';
import { Text } from './Text';

export interface StepperProps {
  value: number;
  onChange: (value: number) => void;
  min?: number;
  max?: number;
  label?: string;
  disabled?: boolean;
}

export const Stepper = ({ 
  value, 
  onChange, 
  min = 1, 
  max, 
  label,
  disabled = false 
}: StepperProps) => {
  return (
    <Box display="flex" alignItems="center" gap={2}>
      {label && <Text size="xs" variant="low" weight="bold" uppercase>{label}</Text>}
      <Box display="flex" alignItems="center" gap={1}>
        <Button 
          variant="secondary" 
          size="sm" 
          onClick={() => onChange(value - 1)} 
          disabled={disabled || value <= min}
          style={{ width: '2rem', height: '2rem', padding: 0 }}
        >
          −
        </Button>
        <Box width={10} height={8} display="flex" alignItems="center" justifyContent="center" bg="var(--ui-color-bg-surface-muted)" style={{ border: '1px solid var(--ui-color-border-default)', borderRadius: 'var(--ui-radius-md)' }}>
          <Text size="sm" weight="bold" variant="high">{value}</Text>
        </Box>
        <Button 
          variant="secondary" 
          size="sm" 
          onClick={() => onChange(value + 1)} 
          disabled={disabled || (max !== undefined && value >= max)}
          style={{ width: '2rem', height: '2rem', padding: 0 }}
        >
          +
        </Button>
      </Box>
    </Box>
  );
};