'use client'

/**
 * Brandbook - Corporate Design & Styleguide
 *
 * Dokumentiert alle Designelemente:
 * - Farben
 * - Typografie
 * - Komponenten
 * - Logo-Verwendung
 * - Tonalität
 */

import { useState } from 'react'
import AdminLayout from '@/components/admin/AdminLayout'
import type { BrandbookTab } from './_components/types'
import ColorsTab from './_components/ColorsTab'
import TypographyTab from './_components/TypographyTab'
import ComponentsTab from './_components/ComponentsTab'
import LogoTab from './_components/LogoTab'
import VoiceTab from './_components/VoiceTab'

const TABS: { id: BrandbookTab; label: string }[] = [
  { id: 'colors', label: 'Farben' },
  { id: 'typography', label: 'Typografie' },
  { id: 'components', label: 'Komponenten' },
  { id: 'logo', label: 'Logo' },
  { id: 'voice', label: 'Tonalität' },
]

export default function BrandbookPage() {
  const [activeTab, setActiveTab] = useState<BrandbookTab>('colors')

  return (
    <AdminLayout title="Brandbook" description="Corporate Design & Styleguide">
      {/* Tabs */}
      <div className="mb-6">
        <div className="flex gap-1 bg-slate-100 p-1 rounded-lg w-fit">
          {TABS.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
                activeTab === tab.id
                  ? 'bg-white text-slate-900 shadow-sm'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {activeTab === 'colors' && <ColorsTab />}
      {activeTab === 'typography' && <TypographyTab />}
      {activeTab === 'components' && <ComponentsTab />}
      {activeTab === 'logo' && <LogoTab />}
      {activeTab === 'voice' && <VoiceTab />}
    </AdminLayout>
  )
}