import { cn } from "@/lib/utils";
export function Panel({
  title,
  description,
  children,
  className,
  actions,
}: {
  title?: string;
  description?: string;
  children: React.ReactNode;
  className?: string;
  actions?: React.ReactNode;
}) {
  return (
    <section className={cn("panel p-5 md:p-6", className)}>
      {title && (
        <div className="mb-5 flex flex-wrap items-start justify-between gap-4">
          <div>
            <h2 className="text-lg font-semibold">{title}</h2>
            {description && (
              <p className="mt-1 text-sm text-muted-foreground">
                {description}
              </p>
            )}
          </div>
          {actions}
        </div>
      )}
      {children}
    </section>
  );
}
export function EmptyState({
  title = "No results found",
  description = "Try adjusting your search or filter criteria.",
}: {
  title?: string;
  description?: string;
}) {
  return (
    <div className="flex min-h-[200px] flex-col items-center justify-center gap-2 p-6 text-center">
      <p className="font-medium">{title}</p>
      <p className="text-sm text-muted-foreground">{description}</p>
    </div>
  );
}