import { Box, Typography } from '@mui/material'
import { Bookmark, BookmarkPlus } from 'lucide-react'

type EmptyContext = 'no-shortlists' | 'empty-shortlist'

const META: Record<EmptyContext, { icon: React.ReactNode; title: string; desc: string }> = {
  'no-shortlists': {
    icon: <Bookmark size={32} color="#94a3b8" />,
    title: 'Noch keine Shortlists',
    desc: 'Speichern Sie Suchergebnisse in einer Shortlist, um sie gezielt zu vergleichen und zu entscheiden.',
  },
  'empty-shortlist': {
    icon: <BookmarkPlus size={32} color="#94a3b8" />,
    title: 'Shortlist ist leer',
    desc: 'Fügen Sie Objekte aus den Suchergebnissen oder dem Match-Feed hinzu.',
  },
}

export function ShortlistEmptyState({ 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>
  )
}
