import React from 'react';
import { Database, Plus } from 'lucide-react';
import { cn } from '@/lib/utils';

interface EmptyStateProps {
  title: string;
  description: string;
  actionLabel?: string;
  onAction?: () => void;
  icon?: React.ReactNode;
  className?: string;
}

export function EmptyState({
  title,
  description,
  actionLabel,
  onAction,
  icon,
  className,
}: EmptyStateProps) {
  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center p-8 sm:p-12 text-center bg-card border border-text-muted/10 rounded-2xl shadow-sm gap-4 max-w-lg mx-auto my-6',
        className
      )}
    >
      <div className="p-4 bg-primary/5 text-primary rounded-full">
        {icon || <Database className="h-10 w-10 animate-bounce" />}
      </div>

      <div className="space-y-1.5">
        <h3 className="text-lg font-bold text-text-primary">
          {title}
        </h3>
        <p className="text-sm text-text-muted leading-relaxed max-w-sm">
          {description}
        </p>
      </div>

      {actionLabel && onAction && (
        <button
          onClick={onAction}
          className="inline-flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-xl text-sm font-semibold shadow-md shadow-primary/20 transition-all duration-200"
        >
          <Plus className="h-4 w-4" />
          {actionLabel}
        </button>
      )}
    </div>
  );
}