import { Box, Typography } from '@mui/material'
import { Building2, Users, ArrowLeftRight } from 'lucide-react'

type EmptyContext = 'select-both' | 'no-need' | 'no-property' | 'no-match'

const META = {
  'select-both': {
    icon: <ArrowLeftRight size={32} color="#94a3b8" />,
    title: 'Objekt und Bedarf wählen',
    desc: 'Wählen Sie ein Objekt links und einen Bedarf rechts, um das Match-Briefing zu sehen.',
  },
  'no-need': {
    icon: <Users size={32} color="#94a3b8" />,
    title: 'Keinen Bedarf ausgewählt',
    desc: 'Wählen Sie rechts einen Bedarf aus.',
  },
  'no-property': {
    icon: <Building2 size={32} color="#94a3b8" />,
    title: 'Kein Objekt ausgewählt',
    desc: 'Wählen Sie links ein Objekt aus.',
  },
  'no-match': {
    icon: <ArrowLeftRight size={32} color="#94a3b8" />,
    title: 'Kein Match gefunden',
    desc: 'Zwischen diesem Objekt und Bedarf existiert kein berechnetes Match.',
  },
}

export function MatchCenterEmptyState({ 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' }}>{desc}</Typography>
    </Box>
  )
}