"use client"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import { Product } from "@/modules/products/product"
import AddToCartButton from "../cart/AddToCartButton"
import SingleProductColors from "../products/SingleProductColors"
import SingleProductCounter from "../products/SingleProductCounter"
import MainDetails from "./MainDetails"

const SingleProductDetails = ({ product, lang }: { product: Product; lang: Lang }) => {
  
  return (
    <>
      {/* title, price and label */}
      <MainDetails product={product} className="max-md:hidden" />

      {/* description and specifications */}
      <div className="border-y border-gray-200 py-7">
        {product?.colors?.length > 0 && (
          <h3 className="font-bold pb-3">
            <TranslateClient text="description" />
          </h3>
        )}
        {product?.colors?.map((color, index) => (
          <div key={color?.id} className="w-full flex justify-between py-1 text-textGray">
            <div>
              {color?.color?.[lang] ? (
                <>
                  {index === 0 ? (
                    <div className="mb-2">
                      <TranslateClient text="color" /> :
                    </div>
                  ) : null}
                  {color?.color?.[lang]}
                </>
              ) : null}
            </div>
            <div>
              {product?.materials?.[index]?.material?.[lang] ? (
                <>
                  {index === 0 ? (
                    <div className="mb-2">
                      <TranslateClient text="material" /> :
                    </div>
                  ) : null}

                  {product?.materials?.[index]?.material?.[lang]}
                </>
              ) : null}
            </div>
          </div>
        ))}

        {(product?.length || product?.width || product?.height) && (
          <h3 className="font-bold py-3">
            <TranslateClient text="specifications" />
          </h3>
        )}
        {/* height */}
        {product?.height ? (
          <div className="w-full flex justify-between py-1 text-textGray">
            <span>
              <TranslateClient text="height" />
            </span>
            <span>
              <TranslateClient text="cm" /> {product?.height || <TranslateClient text="unknown" />}
            </span>
          </div>
        ) : null}
        {/* width */}
        {product?.width ? (
          <div className="w-full flex justify-between py-1 text-textGray">
            <span>
              <TranslateClient text="width" />
            </span>
            <span>
              <TranslateClient text="cm" /> {product?.width}
            </span>
          </div>
        ) : null}
        {/* length */}
        {product?.length ? (
          <div className="w-full flex justify-between py-1 text-textGray">
            <span>
              <TranslateClient text="length" />
            </span>
            <span>
              <TranslateClient text="cm" /> {product?.length}
            </span>
          </div>
        ) : null}
      </div>

      {/* counter and colors */}
      {/* <div className="flex justify-between my-7"> */}
        {/* colors */}
        {/* <SingleProductColors
          product={{
            color_id: product?.colors?.[0]?.id,
            count: product?.count,
            product,
          }}
        /> */}

        {/* counter component */}
        {/* <SingleProductCounter product={product} inSingleProduct={true} /> */}
      {/* </div> */}

      {/* checkout button */}
      <AddToCartButton product={product} inSingleProduct={true} />
    </>
  )
}

export default SingleProductDetails