import { Box, Typography } from '@mui/material'
import { Filter, Radio } from 'lucide-react'

type EmptyContext = 'no-signals' | 'filtered-empty'

const META: Record<EmptyContext, { icon: React.ReactNode; title: string; desc: string }> = {
  'no-signals': {
    icon: <Radio size={32} color="#94a3b8" />,
    title: 'Keine Signale vorhanden',
    desc: 'Es wurden noch keine Zukunftssignale erfasst.',
  },
  'filtered-empty': {
    icon: <Filter size={32} color="#94a3b8" />,
    title: 'Keine Signale für diese Filter',
    desc: 'Passen Sie die Filtereinstellungen an, um Signale anzuzeigen.',
  },
}

export function FutureSignalEmptyState({ context }: { context: EmptyContext }) {
  const { icon, title, desc } = META[context]
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1.5, py: 8, px: 3 }}>
      {icon}
      <Typography variant="subtitle1" sx={{ fontWeight: 600 }} color="text.secondary">{title}</Typography>
      <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', maxWidth: 280 }}>{desc}</Typography>
    </Box>
  )
}