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

const socialLinks = [
  { name: "telegram", icon: "✈️", color: "#0088cc" },
  { name: "facebook", icon: <Facebook />, color: "#1877F2" },
  { name: "odnoklassniki", icon: "ok", color: "#ED7100" },
  { name: "vkontakte", icon: "VK", color: "#0077FF" },
  { name: "twitter", icon: "𝕏", color: "#1DA1F2" },
  { name: "whatsapp", icon: "W", color: "#25D366" },
];

interface RightSideProps {
  id: number;
  title: string;
  name: string;
  description: string;
  statusText: string;
  statusColor: string;
  image: string;
}

export function RightSide({
  title,
  name,
  description,
  statusColor,
  statusText,
  id,
  image,
}: RightSideProps) {
  const openModal = usePriceModalStore((state) => state.openModal);
  const handleGetPrice = () => {
    openModal({
      id: id,
      name: title,
      image: image,
      inStock: true,
    });
  };
  return (
    <div className="flex flex-col justify-center">
      {/* Title */}
      <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-white mb-4 leading-tight">
        {title}
      </h1>

      {/* Article ID */}
      <div className="mb-3">
        <p className="text-gray-400">
          Artikul:
          <span className="text-white font-semibold">{name}</span>
        </p>
      </div>

      {/* Status Badge */}
      <div className="mb-2">
        <span
          className={`inline-block py-2 rounded text-sm font-semibold ${statusColor}`}
        >
          {statusText}
        </span>
      </div>

      {/* description */}
      <div className="mb-2">
        <p className="text-sm font-bold text-white mb-4 leading-tight">
          {description}
        </p>
      </div>

      {/* Price Section */}
      <div className="mb-8">
        <h2 className="text-2xl md:text-3xl font-bold text-red-700 mb-6">
          17.00$
        </h2>

        {/* Action Buttons */}
        <div className="flex flex-col sm:flex-row gap-4 mb-6">
          {/* <button
                        onClick={onPriceClick}
                        className="flex-1 bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"
                      >
                        Narxni bilish
                      </button> */}
          <button
            onClick={handleGetPrice}
            className="flex-1 border-2 border-red-700 text-red-700 hover:bg-red-50 font-bold py-3 px-6 rounded-lg transition duration-300"
          >
            Xabar yuborish
          </button>
          {/* <button
                        onClick={() => setIsFavorite(!isFavorite)}
                        className="p-3 border-2 border-gray-600 rounded-lg hover:border-red-700 transition duration-300"
                        title="Add to favorites"
                      >
                        <Heart
                          size={24}
                          className={
                            isFavorite ? "fill-red-700 text-red-700" : "text-gray-600"
                          }
                        />
                      </button> */}
        </div>

        {/* Social Share Icons */}
        <div className="flex gap-3 items-center">
          <div className="flex 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 duration-300 hover:scale-110"
                style={{ backgroundColor: social.color }}
                title={social.name}
              >
                {social.icon}
              </a>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}