Social Flip Button

"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Icon } from "@iconify/react";

interface SocialFlipButtonProps {
    platform: "twitter" | "github" | "discord" | "figma" | "linkedin";
    href?: string;
}

const config: Record<string, { icon: string; hoverIcon: string; label: string; hoverBg: string; hoverText: string }> = {
    twitter: { icon: "solar:twitter-linear", hoverIcon: "solar:twitter-bold", label: "Follow", hoverBg: "bg-sky-500", hoverText: "Follow" },
    github: { icon: "solar:github-circle-linear", hoverIcon: "solar:github-circle-bold", label: "Star", hoverBg: "bg-zinc-700", hoverText: "Star" },
    discord: { icon: "ic:baseline-discord", hoverIcon: "ic:baseline-discord", label: "Join", hoverBg: "bg-indigo-500", hoverText: "Join" },
    figma: { icon: "solar:figma-linear", hoverIcon: "solar:figma-bold", label: "Follow", hoverBg: "bg-orange-500", hoverText: "Follow" },
    linkedin: { icon: "mdi:linkedin", hoverIcon: "mdi:linkedin", label: "Connect", hoverBg: "bg-blue-600", hoverText: "Connect" },
};

export function SocialFlipButton({ platform, href = "#" }: SocialFlipButtonProps) {
    const [hovered, setIsHovered] = useState(false);
    const c = config[platform];

    return (
        <a
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={`${c.label} on ${platform}`}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
            className={`relative flex items-center gap-2 px-4 py-2 rounded-xl border text-sm font-semibold overflow-hidden transition-all duration-300 ${hovered
                    ? `${c.hoverBg} border-transparent text-white shadow-lg scale-105`
                    : "bg-zinc-900 border-white/10 text-zinc-400"
                }`}
        >
            <motion.span animate={{ rotate: hovered ? 360 : 0 }} transition={{ duration: 0.3 }}>
                <Icon icon={hovered ? c.hoverIcon : c.icon} fontSize={18} />
            </motion.span>
            <AnimatePresence mode="wait">
                <motion.span
                    key={hovered ? "hover" : "default"}
                    initial={{ opacity: 0, y: 6 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -6 }}
                    transition={{ duration: 0.15 }}
                >
                    {hovered ? c.hoverText : platform.charAt(0).toUpperCase() + platform.slice(1)}
                </motion.span>
            </AnimatePresence>
        </a>
    );
}