'use client';

import React, {useState} from 'react';
import {motion, AnimatePresence} from 'framer-motion';
import {FiZap, FiMonitor, FiServer, 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: <FiZap size={20}/>},
    {key: 'beratung', label: 'Beratung', icon: <FiMonitor size={20}/>},
    {key: 'services', label: 'Managed Services', icon: <FiServer 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-5xl mx-auto px-6 py-16 transition-theme text-left">
            <h2 className="text-3xl font-bold mb-2" style={{color: colors.primaryText}}>
                Was wir tun
            </h2>

            <motion.div
                className="w-12 h-[2px] mb-6 bg-amber-500"
                initial={{opacity: 0, x: -20}}
                whileInView={{opacity: 1, x: 0}}
                viewport={{once: true}}
                transition={{duration: 0.4, delay: 0.1}}
            />
            <p className="text-sm mb-10" style={{color: colors.secondaryText}}>
                In diesem Abschnitt geben wir dir einen Überblick über unsere zentralen Leistungen – von der technischen
                Entwicklung über Beratung bis hin zu Betrieb und Support.
            </p>

            <div className="flex flex-wrap gap-4 mb-10">
                {tabs.map((tab) => (
                    <button
                        key={tab.key}
                        onClick={() => setActiveTab(tab.key)}
                        className="flex-1 min-w-[150px] flex items-center justify-start 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;