import { Box, Chip } from '@mui/material'

interface DataCategoryBadgeListProps {
  categories: string[]
  max?: number
}

export function DataCategoryBadgeList({ categories, max }: DataCategoryBadgeListProps) {
  const visible = max ? categories.slice(0, max) : categories
  const overflow = max ? Math.max(0, categories.length - max) : 0

  return (
    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
      {visible.map((cat) => (
        <Chip
          key={cat}
          size="small"
          label={cat}
          sx={{
            bgcolor: 'rgba(30,58,95,0.07)',
            color: '#1e3a5f',
            border: 'none',
            fontSize: '0.68rem',
          }}
        />
      ))}
      {overflow > 0 && (
        <Chip
          size="small"
          label={`+${overflow}`}
          sx={{ bgcolor: 'rgba(0,0,0,0.06)', color: 'text.secondary', border: 'none', fontSize: '0.68rem' }}
        />
      )}
    </Box>
  )
}
