"use client";

import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "@/components/ui/empty";
import { RiErrorWarningLine } from "@remixicon/react";

export default function ProductsError({
  error,
  unstable_retry,
}: {
  error: Error & { digest?: string };
  unstable_retry: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background">
      <Empty>
        <EmptyHeader>
          <EmptyTitle>Couldn’t load products</EmptyTitle>
          <EmptyDescription>
            Something went wrong while loading the catalogue. Please try again.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button
            onClick={() => unstable_retry()}
            variant="outline"
            data-icon="inline-start"
          >
            <RiErrorWarningLine />
            Try again
          </Button>
        </EmptyContent>
      </Empty>
    </div>
  );
}