"use client"

import { ShoppingCart } from "lucide-react";
import { HardHat } from "lucide-react";
import { Tag } from "lucide-react";
import { useLocale } from "next-intl";
import Link from "next/link";
import ContactModal from "../ContactUs";
import { useState } from "react";
import { useTranslations } from "next-intl";


export default function ProductInfo({ title, price, discount, showPrice, category,summery }) {

  const locale = useLocale()

  // Determine the currency symbol based on the locale
  const currencySymbol = locale === "ar-OM" ? "ريال" : "$";
  const CategoryIcon = category.slug === "fmcg" ? ShoppingCart : HardHat
  const discountedPrice = discount ? price * (1 - discount / 100) : price;


  const [open, setOpen] = useState(false);
  const openModal = () => {
    setOpen(true);
  };
  const closeModal = () => {
    setOpen(false);
  }

    const t = useTranslations("ContactModal")

  return (
    <div className="">
      <ContactModal close={closeModal} open={open} />
      <h1 className="text-3xl font-bold">{title}</h1>
      <Link href={`/products/${category.slug}`} className="mt-4 flex items-center">
        <span className={`inline-flex items-center rounded-md bg-gray-100 px-2.5 py-0.5 text-sm font-medium text-gray-800 ltr`}>
        <CategoryIcon className="h-4 w-4 mx-1" />
          {category.title}
        </span>
      </Link>
      <p>
        {
          summery
        }
      </p>
      {showPrice && (
        <div className="mt-4">
          {discount ? (
            <div className="flex items-center">
              <span className="text-2xl font-bold text-primary">
                {locale === "ar-OM" ? (
                  <>
                    {discountedPrice.toFixed(2)} {currencySymbol}
                  </>
                ) : (
                  <>
                    {currencySymbol}
                    {discountedPrice.toFixed(2)}
                  </>
                )}
              </span>
              <span className="ml-2 text-lg text-gray-500 line-through">
                {locale === "ar-OM" ? (
                  <>
                    {price.toFixed(2)} {currencySymbol}
                  </>
                ) : (
                  <>
                    {currencySymbol}
                    {price.toFixed(2)}
                  </>
                )}
              </span>
              <span className="ml-2 inline-flex items-center rounded-md bg-red-100 px-2.5 py-0.5 text-sm font-medium text-red-800">
                {discount}% OFF
              </span>
            </div>
          ) : (
            <span className="text-2xl font-bold text-primary">
              {locale === "ar-OM" ? (
                <>
                  {price.toFixed(2)} {currencySymbol}
                </>
              ) : (
                <>
                  {currencySymbol}
                  {price.toFixed(2)}
                </>
              )}
            </span>
          )}
        </div>
      )}
      <div className="mt-10">
        {/* Replaced Button with Tailwind CSS */}
        <button onClick={openModal} className="w-full lg:w-fit px-8 ltr flex items-center justify-center py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors">
          <ShoppingCart className="mr-2 h-4 w-4" /> {t("cta")}
        </button>
      </div>
    </div>
  );
}