'use client';

import { Header } from '@/components/ui/Header';
import { TableOfContents } from './TableOfContents';
import {
  ButtonsSection,
  BadgesSection,
  CardsSection,
  FormsSection,
  NavigationSection,
  FeedbackSection,
  DataDisplaySection,
  DropdownsSection
} from './sections';

export function UIShowcaseClient() {
  return (
    <div className="min-h-screen bg-[var(--background)]">
      {/* Header avec navigation et dropdown de thèmes */}
      <Header 
        title="🎨 UI Showcase"
        subtitle="Démonstration de tous les composants UI disponibles"
      />
      
      <div className="max-w-7xl mx-auto p-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* Menu de navigation */}
          <div className="lg:col-span-1">
            <TableOfContents />
          </div>

          {/* Contenu principal */}
          <div className="lg:col-span-3 space-y-16">
            <ButtonsSection />
            <BadgesSection />
            <CardsSection />
            <DropdownsSection />
            <FormsSection />
            <NavigationSection />
            <FeedbackSection />
            <DataDisplaySection />
          </div>
        </div>
      </div>
    </div>
  );
}