'use client';

import { useState } from 'react';
import { ProfileOverview } from './profile-overview';
import { ProfileSheet } from './profile-sheet';
import { ProfileProvider } from './profile-provider';
import { ProfileSidebar } from './profile-sidebar';
import { ProfileElite } from './profile-elite';

// 根据activeItem渲染对应的内容组件
function renderContent(activeItem: string) {
	switch (activeItem) {
		case 'overview':
			return <ProfileOverview />
		case 'elite':
			return <ProfileElite />
		default:
			return (
				<ProfileOverview />
			);
	}
}

export default function ProfileLayout() {
	const [activeItem, setActiveItem] = useState('overview');
	const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

	const handleItemChange = (key: string) => {
		setActiveItem(key);
	};

	const handleToggleCollapse = () => {
		setSidebarCollapsed(!sidebarCollapsed);
	};

	return (
		<div className="flex h-full">
			{/* 侧边栏 */}
			<ProfileSidebar
				activeItem={activeItem}
				onItemChange={handleItemChange}
				collapsed={sidebarCollapsed}
				onToggleCollapse={handleToggleCollapse}
			/>

			{/* 主内容区域 */}
			<div className="flex-1 flex flex-col overflow-hidden p-4">
				<ProfileProvider>
					{renderContent(activeItem)}
					<ProfileSheet />
				</ProfileProvider>
			</div>
		</div>
	);
}