'use client';

import { useState, useCallback } from 'react';
import Styles from '../styles/layout.module.scss';
import Header from './Header';
import Footer from './Footer'
import ChannelSidebar from '@/app/component/channel/ChannelSidebar';
import { ChannelListItem } from '@/types/channel';
import { FEATURE_CHANNEL } from '@/constants/features';

type Props = {
	children: React.ReactNode;
	initialChannels?: ChannelListItem[];
};

export default function Layout({ children, initialChannels }: Props) {
	const [sidebarOpen, setSidebarOpen] = useState(false);

	const toggleSidebar = useCallback(() => {
		setSidebarOpen((prev) => !prev);
	}, []);

	const closeOverlay = useCallback(() => {
		setSidebarOpen(false);
	}, []);

	return (
		<>
			<div id='container' className={`${Styles.container}${sidebarOpen ? ` ${Styles.sidebarOpen}` : ''}${FEATURE_CHANNEL ? '' : ` ${Styles.noAside}`}`}>

				<Header sidebarOpen={sidebarOpen} onToggle={toggleSidebar} />

				{/* 모바일 오버레이 */}
				<div className={Styles.overlay} onClick={closeOverlay} />

				{/* 좌측 채널 사이드바 — 채널 기능 OFF 시 미노출 */}
				{FEATURE_CHANNEL && (
					<aside id='aside' className={Styles.aside}>
						<ChannelSidebar initialChannels={initialChannels} />
					</aside>
				)}

				{/* 메인 내용 */}
				<main id='main' className={`${Styles.main} relative`}>
					{children}
				</main>

				{/* 하단 */}
				<Footer />

			</div>
		</>
	);
}