import AboutProduct from "@/modules/products-details/components/product-actions/product-overview";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import React from "react";
import ProductGuideline from "./product-guideline";
import ProductSpecification from "./product-specs-templates";
import EffectiveIdeasDesign from "./effective-ideas-design";
import { CategoryData, IdeasModel, ProductOptionDataModel, ProductSpecModel, ProductTemplateModel } from "@/lib/types/models";

export default async function Page({
  data,
}: {
  data: {
    category: CategoryData
    options: ProductOptionDataModel[]
    specs: ProductSpecModel[]
    ideas: IdeasModel[]
    templates: ProductTemplateModel[]
  };
}) {
  return (
    <>
      <TabsPrimitive.Root
        className="w-full category-tabs"
        // value={selectedCategory}
        // onValueChange={(val) => onValueChange(val)}
        defaultValue={"product-overview"}
      >
        <TabsPrimitive.List
          className="flex shrink-0 border-b border-mauve6 scrollbar overflow-x-auto"
          aria-label="category"
        >
          <TabsPrimitive.Trigger
            className="flex shrink-0 items-center h-[45px] cursor-pointer bg-white px-5 font-medium text-[15px] text-[#3E3E3E] outline-none  hover:text-primary data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            value={"product-overview"}
          >
            Product Overview
          </TabsPrimitive.Trigger>
          <TabsPrimitive.Trigger
            className="flex shrink-0 items-center h-[45px] cursor-pointer bg-white px-5 font-medium text-[15px] text-[#3E3E3E] outline-none  hover:text-primary data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            value={"options"}
          >
            Options
          </TabsPrimitive.Trigger>

          <TabsPrimitive.Trigger
            className="flex shrink-0 items-center h-[45px] cursor-pointer bg-white px-5 font-medium text-[15px] text-[#3E3E3E] outline-none  hover:text-primary data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            value={"specs-templates"}
          >
            Specs & Templates
          </TabsPrimitive.Trigger>
          <TabsPrimitive.Trigger
            className="flex shrink-0 items-center h-[45px] cursor-pointer bg-white px-5 font-medium text-[15px] text-[#3E3E3E] outline-none  hover:text-primary data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary"
            value={"effective-ideas-design"}
          >
            Effective Ideas and Design
          </TabsPrimitive.Trigger>
        </TabsPrimitive.List>
        <TabsPrimitive.Content value="product-overview">
          <AboutProduct bannerContent={data?.category?.description} />
        </TabsPrimitive.Content>
        <TabsPrimitive.Content value="options">
          <ProductGuideline specs={data.specs} name={data?.category?.name} />
        </TabsPrimitive.Content>
        <TabsPrimitive.Content value="specs-templates">
          <ProductSpecification templates={data.templates} />
        </TabsPrimitive.Content>
        <TabsPrimitive.Content value="effective-ideas-design">
          <EffectiveIdeasDesign ideas={data.ideas} name={data?.category?.name} />
        </TabsPrimitive.Content>
      </TabsPrimitive.Root>
    </>
  );
}