import { Box, TableCell, TableRow, Typography } from '@mui/material'
import { Inbox } from 'lucide-react'

interface EmptyTableStateProps {
  colSpan: number
  title?: string
  description?: string
}

export function EmptyTableState({ colSpan, title, description }: EmptyTableStateProps) {
  return (
    <TableRow>
      <TableCell colSpan={colSpan} sx={{ border: 'none' }}>
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 1,
            py: 5,
            color: 'text.disabled',
          }}
        >
          <Inbox size={32} color="#cbd5e1" />
          <Typography sx={{ fontWeight: 500, fontSize: '0.875rem', color: 'text.secondary' }}>
            {title ?? 'Keine Einträge gefunden'}
          </Typography>
          {description && (
            <Typography sx={{ fontSize: '0.8125rem', color: 'text.disabled', textAlign: 'center', maxWidth: 360 }}>
              {description}
            </Typography>
          )}
        </Box>
      </TableCell>
    </TableRow>
  )
}
