import { Link } from "@inertiajs/react";

// export type ProductItem = {
//   slug: string;
//   title: string;
//   description: string;
//   image: string;
//   details: string;
// };

// export const products: ProductItem[] = [
//   {
//     slug: "food-rice",
//     title: "Food rice",
//     description: "We provide high-quality wheat production using the latest agricultural technologies.",
//     image: "/image/rise.jpg",
//     details:
//       "We specialize in high-quality wheat production through the use of the latest farming and irrigation technologies. Our farms are equipped with modern irrigation systems and advanced harvesting techniques to ensure optimal productivity. We adhere to international quality standards and supply our products to local and regional factories and mills.",
//   },
//   {
//     slug: "egg-production-and-packaging",
//     title: "Egg production and packaging",
//     description: "We provide high-quality wheat production using the latest agricultural technologies.",
//     image: "/image/egg.jpg",  
//     details:
//       "We specialize in high-quality wheat production through the use of the latest farming and irrigation technologies. Our farms are equipped with modern irrigation systems and advanced harvesting techniques to ensure optimal productivity. We adhere to international quality standards and supply our products to local and regional factories and mills.",
//   },
//   {
//     slug: "poultry-production",
//     title: "Poultry production, breeding and fattening",
//     description: "We provide high-quality wheat production using the latest agricultural technologies.",
//     image: "/image/chicken.jpg",
//     details:
//       "We specialize in high-quality wheat production through the use of the latest farming and irrigation technologies. Our farms are equipped with modern irrigation systems and advanced harvesting techniques to ensure optimal productivity. We adhere to international quality standards and supply our products to local and regional factories and mills..",
//   },
// ];

export default function ProductServicesSection({ data, product }: { data: any, product: any }) {
  return (
    <section id="products" className="w-full bg-white py-12">
      <div className="mx-auto w-full max-w-[1400px] px-6">
        <div className="grid gap-6 md:grid-cols-3">
          {product.map((item: any, index: number) => (
            <Link key={index} href={`/product/${item.slug}`} className="block h-full" prefetch>
              <article className="h-full overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
                <img
                  src={item.image}
                  alt={item.title}
                  className="h-40 w-full object-cover md:h-44"
                />
                <div className="space-y-2 px-4 py-5">
                  <h3 className="text-sm font-semibold text-slate-900">{item.title}</h3>
                  <p className="text-xs leading-relaxed text-slate-500">{item.description}</p>
                </div>
              </article>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}