import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

const SidebarTabs = ({ tabs, onTabChange }) => {
  const [activeTab, setActiveTab] = useState(tabs[0].id);

  const handleTabChange = (tabId) => {
    setActiveTab(tabId);
    if (onTabChange) {
      onTabChange(tabId);
    }
  };

  return (
    <div className="flex flex-col h-full w-full">
      {/* Tabs Header */}
      <div className="flex h-14 bg-gray-50 border-b border-gray-200 shadow-sm">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`flex-1 text-center p-4 font-medium transition-colors duration-200 ${
              activeTab === tab.id
                ? 'border-b-4 border-emerald-500 text-emerald-600 bg-emerald-50 font-semibold'
                : 'text-gray-500 hover:text-emerald-500'
            }`}
            onClick={() => handleTabChange(tab.id)}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tabs Content */}
      <div className="flex-1 flex flex-col overflow-hidden rounded-b-lg shadow-inner">
        <AnimatePresence mode="wait">
          {tabs.map(
            (tab) =>
              activeTab === tab.id && (
                <motion.div
                  key={tab.id}
                  initial={{ opacity: 0, x: 50 }} // Animation d'entrée
                  animate={{ opacity: 1, x: 0 }} // Animation visible
                  exit={{ opacity: 0, x: -50 }} // Animation de sortie
                  transition={{ duration: 0.3 }} // Durée des animations
                  className="flex-1 flex flex-col h-full min-h-0"
                >
                  {tab.content}
                </motion.div>
              )
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

export default SidebarTabs;