rhein-sw-website/components/Services/Section/OverviewTabs.tsx

// components/Leistungen/Section/OverviewTabs.tsx
'use client';

import React, {useState} from 'react';
import {motion, AnimatePresence} from 'framer-motion';
import {FiMonitor, FiUsers, FiSettings, FiTool} from 'react-icons/fi';
import Development from "@/components/Services/Section/overview/Development";
import Consulting from "@/components/Services/Section/overview/Consulting";
import ManagedServices from "@/components/Services/Section/overview/ManagedServices";
import BugFixing from "@/components/Services/Section/overview/BugFixing";
import {useThemeColors} from "@/utils/useThemeColors";

const tabs = [
    {key: 'entwicklung', label: 'Entwicklung', icon: <FiMonitor size={20}/>},
    {key: 'beratung', label: 'Beratung', icon: <FiUsers size={20}/>},
    {key: 'services', label: 'Managed Services', icon: <FiSettings size={20}/>},
    {key: 'support', label: 'Fehlerbehebung', icon: <FiTool size={20}/>},
];

const tabContent: Record<string, React.ReactNode> = {
    entwicklung: (
        <Development/>
    ),
    beratung: (
        <Consulting/>
    ),
    services: (
        <ManagedServices/>
    ),
    support: (
        <BugFixing/>
    ),
};
const OverviewTabs = () => {
    const [activeTab, setActiveTab] = useState("entwicklung");
    const colors = useThemeColors();

    return (
        <div className="max-w-4xl mx-auto px-6 py-16 text-center transition-theme">
            <h2
                className="text-3xl font-bold mb-4"
                style={{color: colors.primaryText}}
            >
                Was wir tun
            </h2>

            <motion.div
                className="w-12 h-[2px] mb-8 bg-amber-500 mx-auto"
                initial={{opacity: 0, x: -20}}
                whileInView={{opacity: 1, x: 0}}
                viewport={{once: true}}
                transition={{duration: 0.4, delay: 0.1}}
            />

            <div className="flex justify-center gap-4 mb-8 flex-wrap">
                {tabs.map((tab) => (
                    <button
                        key={tab.key}
                        onClick={() => setActiveTab(tab.key)}
                        className="flex items-center gap-2 px-4 py-2 rounded-full border text-sm font-medium transition-all"
                        style={{
                            color: activeTab === tab.key ? '#ffffff' : colors.primaryText,
                            backgroundColor: activeTab === tab.key ? '#1D4ED8' : 'transparent',
                            borderColor: activeTab === tab.key ? '#1D4ED8' : colors.inputBorder,
                        }}
                    >
                        {tab.icon}
                        {tab.label}
                    </button>
                ))}
            </div>

            <AnimatePresence mode="wait">
                <motion.div
                    key={activeTab}
                    initial={{opacity: 0, y: 10}}
                    animate={{opacity: 1, y: 0}}
                    exit={{opacity: 0, y: -10}}
                    transition={{duration: 0.4}}
                >
                    {tabContent[activeTab]}
                </motion.div>
            </AnimatePresence>
        </div>
    );
};

export default OverviewTabs;