import type { ReactNode } from 'react';

export interface EmptyStateProps {
  icon?: ReactNode;
  title: string;
  description: string;
  action?: {
    label: string;
    onClick: () => void;
  };
  className?: string;
}

export function EmptyState({
  icon,
  title,
  description,
  action,
  className = '',
}: EmptyStateProps): ReactNode {
  return (
    <div
      className={`flex flex-col items-center justify-center min-h-[300px] p-8 text-center ${className}`}
    >
      {icon && (
        <div
          className="w-16 h-16 rounded-full flex items-center justify-center mb-4"
          style={{ backgroundColor: 'var(--color-muted, #f3f4f6)' }}
        >
          {icon}
        </div>
      )}
      <h3
        className="text-lg font-medium mb-2"
        style={{ color: 'var(--color-foreground, #111827)' }}
      >
        {title}
      </h3>
      <p className="max-w-sm mb-6" style={{ color: 'var(--color-muted-foreground, #6b7280)' }}>
        {description}
      </p>
      {action && (
        <button
          onClick={action.onClick}
          className="px-4 py-2 rounded-lg transition-colors text-white"
          style={{ backgroundColor: 'var(--color-primary, #2563eb)' }}
        >
          {action.label}
        </button>
      )}
    </div>
  );
}