"use client";

import { useState } from "react";
import ProductGallery from "./ProductGallery";
import ProductInfo from "./ProductInfo";

export default function ProductDetailsClient({
  product,
}: {
  product: any;
}) {
  const [selectedColor, setSelectedColor] = useState<any>(
    product.colors?.[0] || null
  );

  console.log("Selected Color in Client:", selectedColor); // Debug log

  return (
    <div className="flex flex-wrap -mx-3 xl:-mx-6 2xl:-mx-10">
      <div className="2xl:w-6/12 xl:w-[45%] lg:w-6/12 md:w-6/12 sm:w-full w-full px-3 xl:px-6 2xl:px-10 mb-4 mb-lg-0">
        <ProductGallery
          images={product.images}
          variants={product.variants}
          defaultImage={product.defaultImage}
          selectedColor={selectedColor}
        />
      </div>

      <div className="2xl:w-6/12 xl:w-[55%] lg:w-6/12 md:w-6/12 sm:full w-full px-3 xl:px-6 2xl:px-10">
        <ProductInfo
          product={product}
          selectedColor={selectedColor}
          setSelectedColor={setSelectedColor}
        />
      </div>
    </div>
  );
}