import { usePriceModalStore } from "@/store/useProceModalStore";
import { Facebook, Share2 } from "lucide-react";

const socialLinks = [
  { name: "telegram", icon: "✈️", color: "#0088cc" },
  { name: "facebook", icon: <Facebook size={18} />, color: "#1877F2" },
  { name: "whatsapp", icon: "💬", color: "#25D366" },
  { name: "twitter", icon: "𝕏", color: "#1DA1F2" },
];

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 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-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">Narx:</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"
        >
          Xabar yuborish
        </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">Ulashish:</span>
          </div>
          <div className="flex flex-wrap gap-2">
            {socialLinks.map((social) => (
              <a
                key={social.name}
                href="#"
                className="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold transition-all duration-300 hover:scale-110 hover:shadow-lg"
                style={{ backgroundColor: social.color }}
                title={social.name}
              >
                {social.icon}
              </a>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}