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

interface NoResultsStateProps {
  icon?: React.ElementType;
  message?: string;
  searchQuery?: string;
  actionLabel?: string;
  onAction?: () => void;
  children?: React.ReactNode;
  className?: string;
}

export function NoResultsState({
  icon: Icon = Search,
  message,
  searchQuery,
  actionLabel = "Clear filters",
  onAction,
  children,
  className
}: NoResultsStateProps) {
  const defaultMessage = message || `No leagues found${searchQuery ? ` matching "${searchQuery}"` : ' in this category'}`;

  return (
    <Card className={`text-center py-12 ${className || ''}`}>
      <div className="flex flex-col items-center gap-4">
        <Icon className="w-10 h-10 text-gray-600" />
        <p className="text-gray-400">
          {defaultMessage}
        </p>
        {children}
        {actionLabel && onAction && (
          <Button
            variant="secondary"
            onClick={onAction}
          >
            {actionLabel}
          </Button>
        )}
      </div>
    </Card>
  );
}