"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Facebook, Instagram, Youtube, MessageCircle } from "lucide-react";

export default function SocialSidebar() {
    const socialLinks = [
        {
            name: "Follow us on YouTube",
            url: "https://youtube.com/@solarsyndicates?si=NQKQLJqIFP7k-4I3",
            icon: <Youtube className="w-5 h-5" />,
            color: "bg-[#FF0000]", // YouTube Red
            textColor: "text-white"
        },
        {
            name: "Follow us on Instagram",
            url: "https://www.instagram.com/solar.syndicate?igsh=c3NmamplaWpuNHo0",
            icon: <Instagram className="w-5 h-5" />,
            color: "bg-gradient-to-tr from-[#f09433] via-[#bc1888] to-[#2f55a4]", // Insta Gradient
            textColor: "text-white"
        },
        {
            name: "Follow us on Facebook",
            url: "https://www.facebook.com/share/17tzBgNqLF/",
            icon: <Facebook className="w-5 h-5" />,
            color: "bg-[#1877F2]", // Facebook Blue
            textColor: "text-white"
        },
        {
            name: "Chat on WhatsApp",
            url: "https://wa.me/919423006651",
            icon: <MessageCircle className="w-5 h-5" />,
            color: "bg-[#25D366]", // WhatsApp Green
            textColor: "text-white"
        },
    ];

    return (
        <div className="fixed right-0 top-[35%] z-50 flex flex-col gap-3 items-end">
            {socialLinks.map((social, index) => (
                <SocialItem key={social.name} social={social} index={index} />
            ))}
        </div>
    );
}

function SocialItem({ social, index }: { social: any; index: number }) {
    const [isHovered, setIsHovered] = useState(false);

    return (
        <motion.a
            href={social.url}
            target="_blank"
            rel="noopener noreferrer"
            initial={{ x: 100, opacity: 0, width: "48px" }}
            animate={{
                x: 0,
                opacity: 1,
                width: isHovered ? "280px" : "48px"
            }}
            transition={{
                x: { delay: 0.5 + index * 0.1, duration: 0.5, type: "spring" },
                opacity: { delay: 0.5 + index * 0.1, duration: 0.5 },
                width: { duration: 0.2, ease: "easeOut" }
            }}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
            className={`flex items-center justify-end p-3 rounded-l-xl shadow-lg cursor-pointer ${social.color} ${social.textColor} relative`}
            style={{
                height: "48px",
                overflow: "hidden" 
            }}
        >
            <AnimatePresence mode="wait">
                {isHovered && (
                    <motion.div
                        initial={{ opacity: 0, x: 20 }}
                        animate={{ opacity: 1, x: 0 }}
                        exit={{ opacity: 0, x: 20 }}
                        transition={{ duration: 0.2 }}
                        className="font-bold text-sm whitespace-nowrap absolute right-12 pr-2"
                    >
                        {social.name}
                    </motion.div>
                )}
            </AnimatePresence>

            <div className="flex-shrink-0 z-10 w-6 h-6 flex items-center justify-center">
                {social.icon}
            </div>
        </motion.a>
    );
}