'use client'

import { useState } from 'react'
import { MapPin, Palette, Briefcase, Shirt, Zap } from 'lucide-react'
import { clsx } from 'clsx'
import { motion, AnimatePresence } from 'framer-motion'

interface SettingsTabsProps {
    branding: React.ReactNode
    teams: React.ReactNode
    arenas: React.ReactNode
    sponsors: React.ReactNode
    voting: React.ReactNode
}

export function SettingsTabs({ branding, teams, arenas, sponsors, voting }: SettingsTabsProps) {
    const [activeTab, setActiveTab] = useState<'branding' | 'teams' | 'arenas' | 'sponsors' | 'voting'>('branding')

    const tabs = [
        { id: 'branding', label: 'Identidade Visual', icon: Palette },
        { id: 'voting', label: 'Votação & Resenha', icon: Zap },
        { id: 'teams', label: 'Times', icon: Shirt },
        { id: 'arenas', label: 'Locais & Arenas', icon: MapPin },
        { id: 'sponsors', label: 'Patrocínios', icon: Briefcase },
    ] as const

    return (
        <div className="space-y-8">
            <div className="flex p-1 bg-surface-raised rounded-xl border border-border w-full sm:w-fit overflow-x-auto">
                {tabs.map((tab) => (
                    <button
                        key={tab.id}
                        onClick={() => setActiveTab(tab.id)}
                        className={clsx(
                            "flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-bold transition-all flex-1 sm:flex-none justify-center whitespace-nowrap",
                            activeTab === tab.id
                                ? "bg-primary text-background shadow-lg shadow-emerald-500/10"
                                : "text-muted hover:text-foreground hover:bg-white/5"
                        )}
                    >
                        <tab.icon className="w-4 h-4" />
                        {tab.label}
                    </button>
                ))}
            </div>

            <div className="min-h-[500px]">
                <AnimatePresence mode="wait">
                    {activeTab === 'branding' && (
                        <motion.div
                            key="branding"
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: -10 }}
                            transition={{ duration: 0.2 }}
                        >
                            {branding}
                        </motion.div>
                    )}
                    {activeTab === 'voting' && (
                        <motion.div
                            key="voting"
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: -10 }}
                            transition={{ duration: 0.2 }}
                        >
                            {voting}
                        </motion.div>
                    )}
                    {activeTab === 'teams' && (
                        <motion.div
                            key="teams"
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: -10 }}
                            transition={{ duration: 0.2 }}
                        >
                            {teams}
                        </motion.div>
                    )}
                    {activeTab === 'arenas' && (
                        <motion.div
                            key="arenas"
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: -10 }}
                            transition={{ duration: 0.2 }}
                        >
                            {arenas}
                        </motion.div>
                    )}
                    {activeTab === 'sponsors' && (
                        <motion.div
                            key="sponsors"
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: -10 }}
                            transition={{ duration: 0.2 }}
                        >
                            {sponsors}
                        </motion.div>
                    )}
                </AnimatePresence>
            </div>
        </div>
    )
}