import { usePriceModalStore } from "@/store/useProceModalStore";
import { Instagram, Send, Share2 } from "lucide-react";
import { useTranslations } from "next-intl";

interface RightSideProps {
  id: number;
  title: string;
  articular: string;
  status: string;
  description: string;
  price: string;
  image: string;
}

export function RightSide({
  title,
  articular,
  status,
  description,
  price,
  id,
  image,
}: RightSideProps) {
  const openModal = usePriceModalStore((state) => state.openModal);
  const t = useTranslations();

  const handleGetPrice = () => {
    openModal({
      id,
      name: title,
      image,
      inStock: status === "Sotuvda mavjud",
    });
  };

  // Status color logic
  const isInStock = status === "Sotuvda mavjud";
  const statusColor = isInStock
    ? "bg-green-600/20 text-green-400 border border-green-600/30"
    : "bg-red-600/20 text-red-400 border border-red-600/30";

  return (
    <div className="flex flex-col justify-center space-y-6">
      {/* Title */}
      <h1 className="text-2xl md:text-3xl lg:text-4xl font-unbounded font-bold text-white leading-tight">
        {title}
      </h1>

      {/* Article ID */}
      <div className="flex items-center gap-2 text-sm md:text-base">
        <span className="text-gray-400">Artikul:</span>
        <span className="text-white font-semibold">{articular}</span>
      </div>

      {/* Status Badge */}
      <div>
        <span className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}>
          {status}
        </span>
      </div>

      {/* Description */}
      <div className="border-l-4 border-red-700 pl-4">
        <p className="text-sm md:text-base text-gray-300 leading-relaxed">
          {description}
        </p>
      </div>

      {/* Price Section */}
      <div className="bg-[#1716169f] rounded-xl p-6 space-y-6">
        {/* Price */}
        <div>
          <p className="text-gray-400 text-sm mb-2">{t("products.price")}:</p>
          <h2 className="text-3xl md:text-4xl font-bold text-red-700">
            ${price}
          </h2>
        </div>

        {/* Action Button */}
        <button
          onClick={handleGetPrice}
          className="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-4 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-red-700/50"
        >
          {t("products.send")}
        </button>

        {/* Social Share */}
        <div className="pt-4 border-t border-gray-800">
          <div className="flex items-center gap-3 mb-3">
            <Share2 className="w-5 h-5 text-gray-400" />
            <span className="text-sm text-gray-400">{t("products.share")}:</span>
          </div>
          <div className="flex items-center gap-5 mt-5">
                {/* <a href="" className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500">
                  <Instagram />
                </a> */}
                <a href="https://t.me/ignum_tech" className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500">
                  <Send />
                </a>
              </div>
        </div>
      </div>
    </div>
  );
}