import { useNavigate } from "@tanstack/react-router";
import { AlertCircle, ArrowLeft } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

interface PlayerErrorStateProps {
	error: Error;
}

export function PlayerErrorState({ error }: PlayerErrorStateProps) {
	const navigate = useNavigate();

	return (
		<div className="flex h-screen w-full items-center justify-center bg-black p-4">
			<div className="w-full max-w-md space-y-4">
				<Alert variant="destructive">
					<AlertCircle className="h-4 w-4" />
					<AlertTitle>Playback Error</AlertTitle>
					<AlertDescription>{error.message}</AlertDescription>
				</Alert>

				<Button
					variant="outline"
					className="w-full"
					onClick={() => navigate({ to: "/home" })}
				>
					<ArrowLeft className="mr-2 h-4 w-4" />
					Back to Home
				</Button>
			</div>
		</div>
	);
}
