'use client'
import React from 'react';
import Link from 'next/link';
import Image from 'next/image';

interface ProductMenuProps {
    products: ProductItem[]
}
export default function CoreProducts({products}: ProductMenuProps) {
    const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL as string
    return (
        <section className="w-full max-w-7xl mx-auto">
            {/* 标题区域 */}
            <div className="flex flex-col items-center mb-8 relative">
                <Link
                    href="/products"
                    className="absolute right-0 top-0 text-sm text-blue-600 hover:underline flex items-center gap-1"
                >更多
                </Link>
            </div>

            {/* 产品列表 */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {products.map((product) => (
                    <div
                        className="border border-gray-200 rounded-sm p-6 flex flex-col items-center text-center hover:shadow-md transition-shadow duration-300"
                    >
                        <h3 className="font-bold text-lg mb-1 text-gray-800">{product.productName}</h3>
                        <p className="text-sm mb-4 text-gray-500">
                            <span className="text-red-600 line-clamp-1">{product.productIntroduction}</span>
                        </p>
                        {/* 产品图片 */}
                        <div className="w-40 h-40 flex items-center justify-center mb-6">
                            <Image
                                src={product.productUrl ? BASE_URL + product.productUrl : "/assets/productions/2.png"}
                                alt={product.productType}
                                width={160}
                                height={160}
                                className="object-contain"
                            />
                        </div>
                        <p className="text-sm text-gray-600">{product.productType}</p>
                        <p className="text-xs text-gray-400 mt-1">{product.productModel}</p>
                    </div>
                ))}
            </div>
        </section>
    );
};