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

export type EmptyStatePanelProps = {
  title: string;
  description: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  icon?: ReactNode;
};

export function EmptyStatePanel({
  title,
  description,
  primaryLabel,
  secondaryLabel,
  icon
}: EmptyStatePanelProps) {
  return (
    <Card className="h-full">
      <CardContent className="flex flex-col items-center gap-4 py-10 text-center">
        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
          {icon ?? <Search className="h-5 w-5" />}
        </div>
        <div className="space-y-1">
          <h3 className="text-lg font-semibold">{title}</h3>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
        <div className="flex flex-wrap items-center justify-center gap-2">
          {secondaryLabel ? (
            <Button variant="secondary">{secondaryLabel}</Button>
          ) : null}
          {primaryLabel ? <Button>{primaryLabel}</Button> : null}
        </div>
      </CardContent>
    </Card>
  );
}
No hay coincidencias
