// import type { ProductItem } from "@/components/product/ProductServicesSection";
import { useEffect } from "react";


export default function ProductDetailsSection({ product }: {product: any}) {
  useEffect(() => {
    console.log(product);
  }, [product]);
  return (
    <section className="w-full bg-white py-12">
      <div className="mx-auto flex w-full max-w-[1400px] flex-col gap-10 px-6 md:flex-row">
        <div className="w-full md:w-1/2">
          <img
            src={product.image}
            alt={product.title}
            className="h-72 w-full rounded-2xl object-cover shadow-sm md:h-80"
          />
        </div>
        <div className="flex w-full flex-col gap-4 md:w-1/2">
          <div className="text-2xl font-bold text-slate-900 md:text-3xl0">{product.title}</div>
        
          <p className="text-lg leading-relaxed text-slate-600">{product.short_description}</p>
          <div className="space-y-2 pt-2">
            <h1 className="text-2xl font-bold text-green-900 md:text-3xl0">
              {product?.locale === "ar" ? "التفاصيل" : "Details"}
              </h1>
            <p className="text-lg leading-relaxed text-slate-600">{product.description}</p>
          </div>
        </div>
      </div>
    </section>
  );
}