"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { ShoppingCartIcon } from "@heroicons/react/24/outline";
import { Button } from "@/components/atoms/button";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";

/**
 * EmptyCartRedirect - Shown when checkout is accessed without a cart
 *
 * Redirects to shop after a short delay, or user can click to go immediately.
 */
export function EmptyCartRedirect() {
  const router = useRouter();
  const servicesBasePath = useServicesBasePath();

  useEffect(() => {
    const timer = setTimeout(() => {
      router.push(servicesBasePath);
    }, 5000);

    return () => clearTimeout(timer);
  }, [router, servicesBasePath]);

  return (
    <div className="max-w-md mx-auto text-center py-16">
      <div className="bg-card rounded-2xl border border-border p-8 shadow-[var(--cp-shadow-1)]">
        <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-6">
          <ShoppingCartIcon className="h-8 w-8 text-muted-foreground" />
        </div>
        <h2 className="text-xl font-semibold text-foreground mb-2">Your cart is empty</h2>
        <p className="text-muted-foreground mb-6">
          Browse our services to find the perfect plan for your needs.
        </p>
        <Button as="a" href={servicesBasePath} className="w-full">
          Browse Services
        </Button>
        <p className="text-xs text-muted-foreground mt-4">
          Redirecting to the shop in a few seconds...
        </p>
      </div>
    </div>
  );
}
