import type { ReactNode } from 'react';

interface EmptyStateProps {
  icon: ReactNode;
  title: string;
  description: string;
  centered?: boolean;
  className?: string;
}

export function EmptyState({
  icon,
  title,
  description,
  centered = false,
  className = '',
}: EmptyStateProps) {
  return (
    <div
      className={`flex flex-col items-center justify-center text-center ${centered ? 'h-full px-4' : 'py-3 md:py-8'} ${className}`}
    >
      <div className="mb-2">{icon}</div>
      <span className="text-sm font-medium text-warm-400 dark:text-warm-500">{title}</span>
      <span className="text-xs text-warm-400 dark:text-warm-500 mt-1">{description}</span>
    </div>
  );
}