import React from "react";
import Link from "next/link";
import { Inbox } from "lucide-react";
import { Button } from "@/components/ui/button";

/**
 * ExplorerEmpty
 *
 * Friendly empty state with an optional "go up" action.
 *
 * @param {{
 *   title: string,
 *   description: string,
 *   upHref?: string|null
 * }} props
 */
export default function ExplorerEmpty({ title, description, upHref = null }) {
	return (
		<div className="flex flex-col items-center justify-center gap-2 py-10 text-center">
			<Inbox className="h-6 w-6 text-muted-foreground" aria-hidden="true" />
			<div className="space-y-1">
				<p className="text-sm font-medium">{title}</p>
				<p className="text-sm text-muted-foreground">{description}</p>
			</div>

			{upHref ? (
				<Button variant="outline" size="sm" asChild>
					<Link href={upHref}>Eine Ebene höher</Link>
				</Button>
			) : null}
		</div>
	);
}