import { Link as I18nLink, Locale, LOCALES } from "@/i18n/routing";
import { constructMetadata } from "@/lib/metadata";
import { Metadata } from "next";
import { getTranslations } from "next-intl/server";

type Params = Promise<{ locale: string }>;

type MetadataProps = {
  params: Params;
};

export async function generateMetadata({
  params,
}: MetadataProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "Product" });

  return constructMetadata({
    page: "Product",
    title: "产品中心",
    description: "公司产品展示",
    locale: locale as Locale,
    path: `/product`,
    canonicalUrl: `/product`,
  });
}

// 产品数据
const productData = [
  {
    id: 1,
    name: "直线高频焊接圆管(含热浸镀锌)",
    image: "/placeholder.svg",
    url: "/product/114",
  },
  {
    id: 2,
    name: "方矩形焊接钢管(含热浸镀锌)",
    image: "/placeholder.svg",
    url: "/product/115",
  },
  {
    id: 3,
    name: "钢塑复合管",
    image: "/placeholder.svg",
    url: "/product/116",
  },
  {
    id: 4,
    name: "管路连接件",
    image: "/placeholder.svg",
    url: "/product/117",
  },
  {
    id: 5,
    name: "其他产品1",
    image: "/placeholder.svg",
    url: "/product/118",
  },
  {
    id: 6,
    name: "其他产品2",
    image: "/placeholder.svg",
    url: "/product/119",
  },
  {
    id: 7,
    name: "其他产品3",
    image: "/placeholder.svg",
    url: "/product/120",
  },
  {
    id: 8,
    name: "其他产品4",
    image: "/placeholder.svg",
    url: "/product/121",
  },
];

export default async function Page({
  params,
}: {
  params: Params;
}) {
  const { locale } = await params;
  const t = await getTranslations("Product");

  return (
    <div className="w-full">
      {/* 面包屑导航 */}
      <div className="bg-gray-100 py-4">
        <div className="container mx-auto px-4">
          <div className="flex items-center gap-2 text-sm text-gray-500">
            <I18nLink href="/" prefetch={false} className="hover:underline">
              首页
            </I18nLink>
            <span>/</span>
            <span className="text-gray-700">产品中心</span>
          </div>
        </div>
      </div>

      {/* 产品标题区域 */}
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">产品中心</h1>
        
        {/* 产品网格 */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {productData.map((product) => (
            <I18nLink
              key={product.id}
              href={product.url}
              prefetch={false}
              className="block bg-white border border-gray-100 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300"
            >
              <div className="aspect-square flex items-center justify-center p-6">
                <img 
                  src={product.image} 
                  alt={product.name} 
                  className="max-w-full max-h-full object-contain hover:scale-105 transition-transform duration-300"
                />
              </div>
              <div className="p-6 text-center">
                <h3 className="text-lg font-medium text-gray-800 mb-4">{product.name}</h3>
                <div className="inline-block text-red-600 font-medium hover:underline">
                  了解更多 &gt;
                </div>
              </div>
            </I18nLink>
          ))}
        </div>
      </div>
    </div>
  );
}

export async function generateStaticParams() {
  return LOCALES.map((locale) => ({ locale }));
}