import {Suspense} from 'react'
import {Metadata} from 'next'
import {siteConfig} from '@/config/site'
import BreadCrumb from '@/components/bread-crumb'
import Wrap from '@/components/wrap'
import Purchase, {TabType} from '@/components/composites/purchase'
import HomePage from '@/components/home/page'

export type ProductPageProps = {
  searchParams?: Promise<{
    type?: TabType
  }>
}

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: '产品中心',
    description: '为您的业务提供多样化代理产品 - 短效代理、长效代理、固定IP代理、SOCKS5代理，高可用性、低延迟',
    openGraph: {
      title: '产品中心',
      description: '为您的业务提供多样化代理产品 - 短效代理、长效代理、固定IP代理、SOCKS5代理，高可用性、低延迟',
      images: [
        {
          url: siteConfig.ogImage.url,
          width: siteConfig.ogImage.width,
          height: siteConfig.ogImage.height,
          alt: '产品中心',
        },
      ],
    },
    alternates: {
      canonical: `${siteConfig.url}/product`,
    },
  }
}

export default function ProductPage(props: ProductPageProps) {
  return (
    <HomePage path={[
      {label: '产品中心', href: '/product'},
    ]}>
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-center text-3xl md:text-4xl lg:text-5xl font-bold mb-4 md:mb-4">
          为您的业务提供多样化代理产品
        </h1>
      </div>
      <Wrap>
        <Suspense>
          <Purchase/>
        </Suspense>
      </Wrap>
    </HomePage>
  )
}