"use client";

import React, { useEffect, useState } from "react";
import ProductCard from "./ProductCard";

interface RecentlyViewedProps {
  currentProductId: string;
}

export default function RecentlyViewed({ currentProductId }: RecentlyViewedProps) {
  const [viewedProducts, setViewedProducts] = useState<any[]>([]);

  useEffect(() => {
    // Load from local storage
    const stored = localStorage.getItem("recently_viewed");
    if (stored) {
      try {
        const parsed = JSON.parse(stored);
        // Filter out current product to avoid showing what they are currently viewing
        const filtered = parsed.filter((p: any) => p.id !== currentProductId).slice(0, 4);
        setViewedProducts(filtered);
      } catch (err) {
        console.error("Failed to parse recently viewed products", err);
      }
    }
  }, [currentProductId]);

  if (viewedProducts.length === 0) return null;

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 border-t border-zinc-100 mt-16">
      <div className="flex items-center justify-between mb-8">
        <h2 className="text-2xl font-black text-zinc-950 uppercase tracking-widest">
          Recently Viewed
        </h2>
      </div>
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
        {viewedProducts.map((prod) => (
          <ProductCard key={prod.id} product={prod} idPrefix="rv" />
        ))}
      </div>
    </div>
  );
}