import { Box } from './primitives/Box';
import { Stack } from './primitives/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 (
    <Stack 
      direction="row" 
      display="inline-flex" 
      w="full" 
      flexWrap="wrap" 
      gap={2} 
      rounded="full" 
      bg="bg-black/60" 
      p={1}
    >
      {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}
            flex={1}
            minWidth="140px"
            px={3}
            py={1.5}
            rounded="full"
            transition="all 0.2s"
            textAlign="left"
            bg={isSelected ? 'bg-primary-blue' : 'transparent'}
            color={isSelected ? 'text-white' : 'text-gray-400'}
            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'} 
                  fontSize="10px" 
                  opacity={isSelected ? 0.8 : 1}
                >
                  {option.description}
                </Text>
              )}
            </Stack>
          </Box>
        );
      })}
    </Stack>
  );
}