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

export interface FilterOption {
  id: string;
  label: string;
  indicatorColor?: string;
}

export interface FilterGroupProps {
  options: FilterOption[];
  activeId: string;
  onChange?: (id: string) => void;
  onSelect?: (id: string) => void;
  label?: string;
}

export const FilterGroup = ({ 
  options, 
  activeId, 
  onChange,
  onSelect,
  label 
}: FilterGroupProps) => {
  const finalOnChange = onChange || onSelect || (() => {});

  return (
    <Box display="flex" flexDirection="col" gap={2}>
      {label && (
        <Text size="xs" weight="bold" variant="low" uppercase letterSpacing="wider">
          {label}
        </Text>
      )}
      <Surface variant="muted" rounded="lg" padding={1} display="flex" gap={1}>
        {options.map((option) => {
          const isActive = option.id === activeId;
          return (
            <Button
              key={option.id}
              variant={isActive ? 'primary' : 'ghost'}
              size="sm"
              onClick={() => finalOnChange(option.id)}
              fullWidth
            >
              <Box display="flex" alignItems="center" gap={2}>
                {option.indicatorColor && (
                  <Box 
                    width="0.5rem" 
                    height="0.5rem" 
                    rounded="full" 
                    style={{ backgroundColor: option.indicatorColor }} 
                  />
                )}
                {option.label}
              </Box>
            </Button>
          );
        })}
      </Surface>
    </Box>
  );
};
