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

interface SegmentedControlOption {
  value: string;
  label: string;
  description?: string;
  disabled?: boolean;
}

interface SegmentedControlProps {
  options: SegmentedControlOption[];
  value: string;
  onChange?: (value: string) => void;
}

export function SegmentedControl({
  options,
  value,
  onChange,
}: SegmentedControlProps) {
  const handleSelect = (optionValue: string, optionDisabled?: boolean) => {
    if (!onChange || optionDisabled) return;
    if (optionValue === value) return;
    onChange(optionValue);
  };

  return (
    <Box style={{ display: 'inline-flex', width: '100%', flexWrap: 'wrap', gap: '0.5rem', borderRadius: '9999px', backgroundColor: 'rgba(38, 38, 38, 0.6)', padding: '0.25rem' }}>
      {options.map((option) => {
        const isSelected = option.value === value;
        
        return (
          <Box
            key={option.value}
            as="button"
            type="button"
            onClick={() => handleSelect(option.value, option.disabled)}
            aria-pressed={isSelected}
            disabled={option.disabled}
            style={{ 
              flex: 1, 
              minWidth: '140px', 
              padding: '0.375rem 0.75rem', 
              borderRadius: '9999px', 
              transition: 'all 0.2s', 
              textAlign: 'left',
              backgroundColor: isSelected ? '#3b82f6' : 'transparent',
              color: isSelected ? 'white' : '#d1d5db',
              opacity: option.disabled ? 0.5 : 1,
              cursor: option.disabled ? 'not-allowed' : 'pointer',
              border: 'none'
            }}
          >
            <Stack gap={0.5}>
              <Text size="xs" weight="medium" color="inherit">{option.label}</Text>
              {option.description && (
                <Text size="xs" color={isSelected ? 'text-white' : 'text-gray-400'} style={{ fontSize: '10px', opacity: isSelected ? 0.8 : 1 }}>
                  {option.description}
                </Text>
              )}
            </Stack>
          </Box>
        );
      })}
    </Box>
  );
}