import React from "react";
import Link from "next/link";
import { FolderX } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardHeader,
	CardTitle,
	CardDescription,
	CardContent,
	CardFooter,
} from "@/components/ui/card";

/**
 * ExplorerNotFound
 *
 * Used when the backend returns FS_NOT_FOUND for a syntactically valid route.
 * This can happen when the NAS structure changed after the user navigated.
 *
 * @param {{
 *   title?: string,
 *   description?: string,
 *   upHref?: string|null,
 *   branchRootHref?: string|null
 * }} props
 */
export default function ExplorerNotFound({
	title = "Nicht gefunden",
	description = "Dieser Pfad existiert nicht (mehr). Bitte wählen Sie eine andere Ebene.",
	upHref = null,
	branchRootHref = null,
}) {
	return (
		<Card>
			<CardHeader>
				<CardTitle className="flex items-center gap-2">
					<FolderX
						className="h-5 w-5 text-muted-foreground"
						aria-hidden="true"
					/>
					{title}
				</CardTitle>
				<CardDescription>{description}</CardDescription>
			</CardHeader>

			<CardContent className="text-sm text-muted-foreground">
				Dies kann passieren, wenn Ordner auf dem NAS verschoben oder gelöscht
				wurden.
			</CardContent>

			<CardFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end">
				{upHref ? (
					<Button variant="outline" asChild>
						<Link href={upHref}>Eine Ebene höher</Link>
					</Button>
				) : null}

				{branchRootHref ? (
					<Button asChild>
						<Link href={branchRootHref}>Zur Niederlassung</Link>
					</Button>
				) : null}
			</CardFooter>
		</Card>
	);
}