import { PropsWithChildren } from "react";
import { Sort } from "./_components/Sort";
import { Marka } from "./_components/Marka";
import { getCategories } from "@/actions/category";
import { getSubCategories } from "@/actions/subCategory";
import { Model } from "./_components/Model";
import { Seher } from "./_components/City";
import { getCities } from "@/actions/city";
import DualRangeSliderCustomLabel from "@/components/shared/Dual";
import { getMaxPrice, getMinPrice } from "@/actions/price";
import ResetParams from "./_components/ResetParams";
export default async function ProductListLayout({
  children,
}: PropsWithChildren) {
  const categories = await getCategories();
  const subCategories = await getSubCategories();
  const cities = await getCities();
  const maxPrice = (await getMaxPrice()) || 1000000;
  let minPrice = (await getMinPrice()) || 0;
  if (minPrice === maxPrice) {
    minPrice = 0;
  }

  return (
    <div className="bg-white">
      <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <section aria-labelledby="products-heading" className="pb-24 pt-6">
          <div className="flex items-center justify-center md:justify-start gap-3 flex-wrap">
            <Sort />
            <Marka categories={categories} />
            <Model subCategories={subCategories} />
            <Seher cities={cities} />
            <ResetParams />
            <div className="flex  flex-col gap-1 w-[170px] text-center  px-2">
              <h1 className="text-center">Qiymət Aralığı</h1>
              <div className="border border-black rounded-md">
                <DualRangeSliderCustomLabel
                  min={minPrice!}
                  max={maxPrice!}
                  step={500}
                />
              </div>
            </div>
          </div>
          <div className="mt-6">
            <div>{children}</div>
          </div>
        </section>
      </main>
    </div>
  );
}