import React from 'react';
import { LucideIcon } from 'lucide-react';
import { Button } from './ui/button';

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

export const EmptyState: React.FC<EmptyStateProps> = ({
  icon: Icon,
  title,
  description,
  action,
  className = ''
}) => {
  return (
    <div className={`flex flex-col items-center justify-center py-12 px-4 text-center ${className}`}>
      {Icon && (
        <div className="mb-4 rounded-full bg-muted p-6">
          <Icon className="h-12 w-12 text-muted-foreground" strokeWidth={1.5} />
        </div>
      )}

      <h3 className="text-lg font-semibold text-foreground mb-2">
        {title}
      </h3>

      {description && (
        <p className="text-sm text-muted-foreground max-w-md mb-6">
          {description}
        </p>
      )}

      {action && (
        <Button onClick={action.onClick}>
          {action.label}
        </Button>
      )}
    </div>
  );
};

// Specific empty state variants
export const NoResultsState: React.FC<{ onReset?: () => void }> = ({ onReset }) => (
  <EmptyState
    title="No results found"
    description="Try adjusting your search or filter to find what you're looking for."
    action={onReset ? { label: 'Clear filters', onClick: onReset } : undefined}
  />
);

export const ErrorState: React.FC<{ onRetry?: () => void; error?: string }> = ({ onRetry, error }) => (
  <EmptyState
    title="Something went wrong"
    description={error || "We couldn't load this content. Please try again."}
    action={onRetry ? { label: 'Try again', onClick: onRetry } : undefined}
  />
);
