"use client";

import { AlertTriangle, RotateCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

export default function AppError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <Card>
      <CardContent className="flex flex-col items-center gap-3 py-16 text-center">
        <span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-destructive/10 text-destructive">
          <AlertTriangle className="h-6 w-6" />
        </span>
        <div>
          <p className="font-display text-lg font-bold tracking-tight">Something went wrong</p>
          <p className="max-w-md text-sm text-muted-foreground">
            {error.message || "This page failed to load. Please try again."}
          </p>
        </div>
        <Button onClick={reset}>
          <RotateCw className="h-4 w-4" /> Try again
        </Button>
      </CardContent>
    </Card>
  );
}