'use client'

/**
 * Brandbook - Corporate Design & Styleguide
 *
 * Aktualisiert fuer admin-v2 mit:
 * - Neuen Kategorie-Farben
 * - Aktuellem UI-Design
 * - Inter Font Family
 */

import { useState } from 'react'
import { TABS, type BrandbookTab } from './constants'
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'

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

  return (
    <div>
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-900">Brandbook</h1>
        <p className="text-slate-500 mt-1">Corporate Design & Styleguide fuer BreakPilot Admin v2</p>
      </div>

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

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