import Header from "@/components/views/header/Header"
import LatestProducts from "@/components/views/home/LatestProducts"
import ProductsData from "@/components/views/products/ProductsData"
import RecommendedForYouSlider from "@/components/views/shared/RecommendedForYouSlider"
import { getServerDictionary } from "@/lib/dictionary"
import { images } from "@/lib/images"

const page = async ({ params: { lang } }: { params: { lang: Lang } }) => {
  const locale = await getServerDictionary(lang)

  const crumb = [
    { path: `/${lang}`, label: locale.home },
    { path: `/${lang}/products`, label: locale.products },
  ]

  
  return (
    <div>
      {/* header */}
      <Header title="products" crumb={crumb} image={images.fData1} />
      <ProductsData />
      {/* recommended for you */}
      <section className="py-20 bg-mainOffWhite-200 min-h-[500px]">
        <div className="container">
          <RecommendedForYouSlider title="recommended_for_you" />
        </div>
      </section>

      {/* latest offers */}
      <section className="py-20">
        <div className="container">
          <LatestProducts />
        </div>
      </section>
    </div>
  )
}

export default page