"use client"

import { useState } from 'react'
import { Sidebar } from './sidebar'
import { UserSettings } from './user-settings'
import { DashboardHome } from './dashboard-home'
import { useSidebar } from '@/hooks/useSidebar'

export type DashboardSection = 'home' | 'settings'

export function Dashboard() {
  const { getSidebarMargin } = useSidebar()
  const [activeSection] = useState<DashboardSection>('home')

  const renderContent = () => {
    switch (activeSection) {
      case 'settings':
        return <UserSettings />
      case 'home':
      default:
        return <DashboardHome />
    }
  }

  return (
    <div className="h-screen flex overflow-hidden">
      <Sidebar />
      <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
        {renderContent()}
      </main>
    </div>
  )
}