'use client'

import { memo, ReactNode } from 'react'
import { Inbox, ListTodo, Search, Filter } from 'lucide-react'

interface EmptyStateProps {
  icon?: 'inbox' | 'list' | 'search' | 'filter'
  title: string
  description?: string
  action?: ReactNode
}

function EmptyState({ icon = 'inbox', title, description, action }: EmptyStateProps) {
  const icons = {
    inbox: <Inbox size={48} className="text-gray-300" />,
    list: <ListTodo size={48} className="text-gray-300" />,
    search: <Search size={48} className="text-gray-300" />,
    filter: <Filter size={48} className="text-gray-300" />,
  }

  return (
    <div className="flex flex-col items-center justify-center py-12 sm:py-16 px-4 text-center">
      <div className="mb-4 sm:mb-6 opacity-50">
        {icons[icon]}
      </div>
      <h3 className="text-lg sm:text-xl font-semibold text-gray-700 mb-2">
        {title}
      </h3>
      {description && (
        <p className="text-sm sm:text-base text-gray-500 mb-6 max-w-md">
          {description}
        </p>
      )}
      {action && (
        <div className="mt-4">
          {action}
        </div>
      )}
    </div>
  )
}

export default memo(EmptyState)