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

interface TableToolbarProps {
  title?: string
  count?: number
  filterSlot?: ReactNode
  actions?: ReactNode
  sx?: SxProps<Theme>
}

export function TableToolbar({ title, count, filterSlot, actions, sx }: TableToolbarProps) {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        px: 2,
        py: 1.25,
        borderBottom: '1px solid',
        borderColor: 'divider',
        gap: 1,
        flexWrap: 'wrap',
        ...sx,
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', flex: 1 }}>
        {title && (
          <Typography sx={{ fontWeight: 600, fontSize: '0.875rem' }}>
            {title}
          </Typography>
        )}
        {count !== undefined && (
          <Chip
            label={count}
            size="small"
            sx={{ height: 20, fontSize: '0.7rem', bgcolor: 'rgba(30,58,95,0.08)', color: '#152642' }}
          />
        )}
        {filterSlot}
      </Box>
      {actions && (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
          {actions}
        </Box>
      )}
    </Box>
  )
}
