"use client";
import posts from "../data";
import { useSearchParams } from "next/navigation";
import React, { useState, useEffect } from "react";
import { Suspense } from "react";

const CartComponent = () => {
  const searchParams = useSearchParams();
  const id = searchParams.get("id");

  const [items, setItems] = useState(() => {
    if (typeof window !== "undefined") {
      return JSON.parse(localStorage.getItem("items") || "[]");
    } else {
      return [];
    }
  });

  useEffect(() => {
    const newItem = posts.find((item) => item.id === parseInt(id));

    if (newItem) {
        setItems((prevItems) => [...prevItems, newItem]);
        localStorage.setItem("items", JSON.stringify([...items, newItem]));
    }
  }, []);

  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
      {items.map((item, index) => (
        <div key={index}>
          {item.id}
          {item.name}
          {item.price}
          {item.image}
        </div>
      ))}
    </div>
  );
};


export default function Cart() {
  return (
    <Suspense>
      <CartComponent />
    </Suspense>
  )
}

"use client";
import posts from "../data";
import { useSearchParams } from "next/navigation";
import React, { useState, useEffect } from "react";
import { Suspense } from "react";

const CartComponent = () => {
  const searchParams = useSearchParams();
  const id = searchParams.get("id");

  const [items, setItems] = useState(() => {
    if (typeof window !== "undefined") {
      return JSON.parse(localStorage.getItem("items") || "[]");
    } else {
      return [];
    }
  });

  useEffect(() => {
    const newItem = posts.find((item) => item.id === parseInt(id));

    if (newItem) {
        setItems((prevItems) => [...prevItems, newItem]);
        localStorage.setItem("items", JSON.stringify([...items, newItem]));
    }
  }, []);

  return (
    <div>
      <h2>Please proceed to give me your card details!</h2>
      {items.map((item, index) => (
        <div key={index}>
          {item.id}
          {item.name}
          {item.price}
          {item.image}
        </div>
      ))}
    </div>
  );
};


export default function Cart() {
  return (
    <Suspense>
      <CartComponent />
    </Suspense>
  )
}