n3wt-school/Front-End/src/components/EmptyState.js

import React from 'react';
import { Inbox } from 'lucide-react';

const EmptyState = ({
  icon: Icon = Inbox,
  title,
  description,
  actionLabel,
  onAction,
  actionIcon: ActionIcon,
}) => {
  return (
    <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
      <div className="bg-neutral p-4 rounded-full mb-4">
        <Icon size={40} className="text-gray-400" />
      </div>
      <h3 className="font-headline text-lg font-semibold text-gray-700 mb-2">
        {title}
      </h3>
      {description && (
        <p className="text-sm text-gray-500 max-w-md mb-6">{description}</p>
      )}
      {actionLabel && onAction && (
        <button
          onClick={onAction}
          className="flex items-center gap-2 bg-primary hover:bg-secondary text-white font-label font-medium px-6 py-2.5 rounded transition-colors min-h-[44px]"
        >
          {ActionIcon && <ActionIcon size={18} />}
          {actionLabel}
        </button>
      )}
    </div>
  );
};

export default EmptyState;