"use client";

import { useRouter } from "next/navigation";
import { useCallback, useMemo } from "react";
import { toast } from "sonner";
import ShopProductCard from "@/components/shop/ShopProductCard";
import { getProductDetailRelatedProducts } from "@/data/product-detail-related";
import { addProductToCartById } from "@/lib/cart-add";
import type { ShopProduct } from "@/data/shop";

const RELATED_COLUMNS = "col-lg-4 col-md-6";

export default function RelatedProduct() {
  const router = useRouter();

  const products = useMemo(() => getProductDetailRelatedProducts(), []);

  const handleAddToCart = useCallback(
    (product: ShopProduct) => {
      addProductToCartById(product.id);
      toast.success(`${product.title} added to cart`, {
        description:
          "Your cart was updated. Adjust quantities or continue shopping.",
        action: {
          label: "View cart",
          onClick: () => router.push("/cart"),
        },
      });
    },
    [router],
  );

  return (
    <div className="row">
      {products.map((product) => (
        <ShopProductCard
          key={product.id}
          product={product}
          columnClassName={RELATED_COLUMNS}
          onAddToCart={() => handleAddToCart(product)}
        />
      ))}
    </div>
  );
}