import React from 'react';
import { Inbox, FileQuestion, PackageOpen, SearchX } from 'lucide-react';

interface EmptyStateProps {
  title: string;
  description: string;
  icon?: 'inbox' | 'file' | 'package' | 'search';
  action?: {
    label: string;
    onClick: () => void;
  };
}

const IconMap = {
  inbox: Inbox,
  file: FileQuestion,
  package: PackageOpen,
  search: SearchX,
};

export default function EmptyState({ title, description, icon, action }: EmptyStateProps) {
  const IconComponent = icon ? IconMap[icon] : null;

  return (
    <div className="flex flex-col items-center justify-center p-12 text-center max-w-md mx-auto">
      <div className="text-indigo-500 mb-4">
        {IconComponent ? (
          <IconComponent className="w-16 h-16" strokeWidth={1.5} />
        ) : (
          <span className="text-6xl">📋</span>
        )}
      </div>
      <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
        {title}
      </h3>
      <p className="text-slate-500 dark:text-slate-400 mb-6">
        {description}
      </p>
      {action && (
        <button
          onClick={action.onClick}
          className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors duration-200 shadow-sm"
        >
          {action.label}
        </button>
      )}
    </div>
  );
}