import { Box, Chip, Typography } from '@mui/material'
import type { SxProps, Theme } from '@mui/material'

interface ActiveFilter {
  key: string
  label: string
  onRemove: () => void
}

interface FilterBarProps {
  filters: ActiveFilter[]
  onClearAll?: () => void
  sx?: SxProps<Theme>
}

export function FilterBar({ filters, onClearAll, sx }: FilterBarProps) {
  if (filters.length === 0) return null

  return (
    <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 0.5, ...sx }}>
      {filters.map(f => (
        <Chip
          key={f.key}
          label={f.label}
          size="small"
          onDelete={f.onRemove}
          sx={{ fontSize: '0.75rem', height: 24 }}
        />
      ))}
      {onClearAll && filters.length > 1 && (
        <Typography
          component="button"
          onClick={onClearAll}
          sx={{
            fontSize: '0.75rem',
            color: 'text.secondary',
            cursor: 'pointer',
            background: 'none',
            border: 'none',
            p: 0,
            ml: 0.5,
            '&:hover': { color: 'primary.main', textDecoration: 'underline' },
          }}
        >
          Alle löschen
        </Typography>
      )}
    </Box>
  )
}
