import { motion } from "framer-motion";

interface TabOption {
    id: string;
    label: string;
}

interface AnimatedTabsProps {
    options: TabOption[];
    activeTab: string;
    onChange: (tabId: string) => void;
    className?: string;
}

export function AnimatedTabs({ options, activeTab, onChange, className = "" }: AnimatedTabsProps) {
    return (
        <nav className={`flex items-center gap-2 rounded-xl bg-slate-100/60 p-2 ${className}`}>
            {options.map((option) => (
                <motion.button
                    key={option.id}
                    onClick={() => onChange(option.id)}
                    className={`relative rounded-lg px-4 py-2 text-sm font-medium transition-colors
              ${activeTab === option.id
                            ? "text-slate-900"
                            : "text-slate-600 hover:text-slate-900"
                        }`}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    transition={{ type: "spring", stiffness: 400, damping: 17 }}
                >
                    {activeTab === option.id && (
                        <motion.div
                            className="absolute inset-0 z-0 rounded-lg bg-white"
                            layoutId="activeTab"
                            style={{ boxShadow: "0 2px 8px rgba(0,0,0,0.1)" }}
                            transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
                        />
                    )}
                    <span className="relative z-10">{option.label}</span>
                </motion.button>
            ))}
        </nav>
    );
}