import { SlidersHorizontal } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

interface EmptyStateProps {
  totalMeetingsCount: number;
  hasActiveFilters: boolean;
  resetFilters: () => void;
}

export function EmptyState({
  totalMeetingsCount,
  hasActiveFilters,
  resetFilters,
}: EmptyStateProps) {
  return (
    <Card className="flex-1 flex flex-col justify-center">
      <CardContent className="p-8 text-center flex flex-col items-center justify-center min-h-[220px]">
        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-50 dark:bg-gray-800 text-gray-400 dark:text-gray-500 mb-3">
          <SlidersHorizontal className="h-5 w-5" />
        </div>
        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
          {totalMeetingsCount === 0 ? "No meetings found" : "No matching meetings"}
        </h3>
        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 max-w-[280px]">
          {totalMeetingsCount === 0
            ? "There are no meetings recorded in the system yet."
            : "We couldn't find any meetings matching your active search or filters. Try adjusting them."}
        </p>
        {hasActiveFilters && (
          <Button
            variant="outline"
            size="sm"
            className="mt-4 rounded-xl"
            onClick={resetFilters}
          >
            Clear All Filters
          </Button>
        )}
      </CardContent>
    </Card>
  );
}