"use client";

import React from "react";
import Image from "next/image";
import { Button } from "@/shared/ui/button";
import { Product } from "@/shared/types/product";
import formatNumberWithSpaces from "@/shared/lib/formatNumberWithSpace";
import { useAuthStore } from "@/shared/store/authStore";
import { Link } from "@/shared/config/i18n/navigation";
import BuyForm from "./buyForm";
import { useTranslations } from "next-intl";

interface ProductDetailsSectionProps {
  product: Product;
}

const ProductDetailsSection = ({ product }: ProductDetailsSectionProps) => {
  const { isAuthenticated } = useAuthStore();
  const t = useTranslations("")

  return (
    <div className="my-container px-4">
      <section className="my-container">
        <div className="flex flex-col justify-center">
          <div className="p-24 grid grid-cols-2 max-md:grid-cols-1 items-center max-md:p-0">
            <div className="flex items-center justify-center">
              <Image
                className="w-10/12 max-md:w-full rounded-4xl"
                src={product.poster}
                alt={product.name}
                width={200}
                height={200}
              />
            </div>
            <div>
              <h2 className="font-bold text-4xl leading-relaxed">
                {product.name}
              </h2>
              <div
                className="my-5"
                dangerouslySetInnerHTML={{ __html: product.short_description! }}
              />
              <div className="gap-5">
                <span className="text-3xl font-bold">
                  {formatNumberWithSpaces(product.price)} {t("so'm")}
                  <span className="text-base font-light"> {t("QQS bilan")}</span>
                </span>
                <span className="block">
                  {formatNumberWithSpaces(product.price_usd)} y.e.
                </span>
                {product.discount_percent > 0 && (
                  <>
                    <span className="text-xl font-bold text-red-500 line-through">
                      {formatNumberWithSpaces(product.price_discount)} {t("so'm")}
                    </span>
                    <span className="text-xl font-bold text-red-500">
                      {product.discount_percent}% {t("chegirma")}
                    </span>
                  </>
                )}
              </div>

              {isAuthenticated ? (
                <BuyForm product={product} />
              ) : (
                <Button className="mt-8 px-16" asChild>
                  <Link href={"/auth/login"}>{t("Sotib olish")}</Link>
                </Button>
              )}
            </div>
          </div>
        </div>

        <div
          className="text-base flex flex-col justify-center items-center mb-24 mt-12"
          dangerouslySetInnerHTML={{ __html: product.description! }}
        />
      </section>
    </div>
  );
};
export default ProductDetailsSection;