"use client";

import React from "react";
import { ShoppingBasket } from "lucide-react";
import { useRouter } from "next/navigation";
import { Button } from "../ui/button";
import {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
} from "../ui/empty";

export const EmptyCartFallback = () => {
  const router = useRouter();

  return (
    <Empty className="h-[50vh]">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <ShoppingBasket className="text-muted-foreground" />
        </EmptyMedia>
        <EmptyTitle>Warenkorb leer</EmptyTitle>
        <EmptyDescription>Leider ist Ihr Warenkorb leer!</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button
          variant="secondary"
          onClick={() => {
            router.push("/");
          }}
        >
          Weiter Einkaufen
        </Button>
      </EmptyContent>
    </Empty>
  );
};