"use client"

import { useState } from 'react'
import { AdminSidebar } from './admin-sidebar'
import { UsersSection } from './users-section'
import { UIKitSection } from './ui-kit-section'
import { CategoriesSection } from './categories-section'

type AdminSection = 'users' | 'categories' | 'ui-kit' | 'settings'

export function AdminDashboard() {
  const [activeSection, setActiveSection] = useState<AdminSection>('users')

  const renderContent = () => {
    switch (activeSection) {
      case 'users':
        return <UsersSection />
      case 'categories':
        return (
          <div className="p-8">
            <CategoriesSection />
          </div>
        )
      case 'ui-kit':
        return <UIKitSection />
      case 'settings':
        return (
          <div className="p-8">
            <h1 className="text-3xl font-bold text-white mb-6">Настройки</h1>
            <div className="glass-card p-6">
              <p className="text-white/70">Раздел настроек в разработке</p>
            </div>
          </div>
        )
      default:
        return <UsersSection />
    }
  }

  return (
    <div className="min-h-screen bg-gradient-smooth flex">
      <AdminSidebar 
        activeSection={activeSection} 
        onSectionChange={setActiveSection} 
      />
      <main className="flex-1 ml-64">
        {renderContent()}
      </main>
    </div>
  )
}