import { Trophy, Sparkles, Search } from 'lucide-react';
import Heading from '@/components/ui/Heading';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';

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

export function EmptyState({
  title,
  description,
  icon: Icon = Trophy,
  actionIcon: ActionIcon = Sparkles,
  actionLabel,
  onAction,
  children,
  className,
}: EmptyStateProps) {
  return (
    <Card className={`text-center py-16 ${className || ''}`}>
      <div className="max-w-md mx-auto">
        <div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-primary-blue/10 border border-primary-blue/20 mb-6">
          <Icon className="w-8 h-8 text-primary-blue" />
        </div>
        <Heading level={2} className="text-2xl mb-3">
          {title}
        </Heading>
        <p className="text-gray-400 mb-8">
          {description}
        </p>
        {children}
        {actionLabel && onAction && (
          <Button
            variant="primary"
            onClick={onAction}
            className="flex items-center gap-2 mx-auto"
          >
            <ActionIcon className="w-4 h-4" />
            {actionLabel}
          </Button>
        )}
      </div>
    </Card>
  );
}