import TranslateClient from "@/components/ui/localization/TranslateClient"
import useCurrentLanguage from "@/hooks/useCurrentLanguage"
import { Product } from "@/modules/products/product"

export default function MainDetails({ product, className }: { product: Product; className?: string }) {
  const { lang } = useCurrentLanguage()

  const priceAfterDiscount =
    product?.type === "ratio"
      ? product?.price - product?.price * (product?.discount / 100)
      : product?.price - product?.discount

  return (
    <div className={`${className || ""}`}>
      <h2 className="text-xl font-bold mb-3">{product?.name?.[lang]}</h2>
      <p className="text-textGray-100">{product?.description?.[lang]}</p>

      {/* price and label */}
      <div className="pt-7 pb-2 flex justify-between">
        <span className="flex items-center">
          <span className="font-bold ltr:mr-2 rtl:ml-2">
            <TranslateClient text="SAR" /> {priceAfterDiscount}
          </span>
          {product?.discount ? (
            <span className="text-sm line-through text-textGray-100">
              <TranslateClient text="SAR" /> {product?.price}
            </span>
          ) : null}
        </span>
        {product?.MostSelling && (
          <span className="text-xs text-white inline-flex items-center bg-mainLime px-5">
            <TranslateClient text="best_seller" />
          </span>
        )}
      </div>
      <p className="rtl:text-start font-bold text-sm text-mainBlue pb-2">
        <TranslateClient text="prices_do_not_include_tax" />
      </p>
    </div>
  )
}