ANTOOZA-FRONTEND/app/component/Header.tsx

'use client';

import Styles from '../styles/layout.module.scss';
import { useCallback } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import useAuth from '@/hooks/useAuth';
import useDragScroll from '@/hooks/useDragScroll';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faXmark, faCartShopping, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import NotificationBell from '@/app/component/NotificationBell';
import Profile from '@/app/component/Profile';
import Logo from '@/app/component/Logo';
import PointChargeIcon from '@/public/icons/layout/point.svg';
import useCart from '@/hooks/useCart';

const navItems = [
	{ href: '/live', label: '생방송' },
	{ href: '/creators', label: '크리에이터' },
	{ href: '/games', label: '게임' },
	{ href: '/feed/all', label: '피드' },
	{ href: '/ranking/hall-of-fame', label: '순위' },
	{ href: '/store', label: '상점' },
	{ href: '/attendance', label: '출석부' },
	{ href: '/board/notice', label: '고객지원' }
];

const SCROLL_AMOUNT = 120;

type Props = {
	sidebarOpen: boolean;
	onToggle: () => void;
};

export default function Header({ sidebarOpen, onToggle }: Props)
{
	const { isAuthenticated } = useAuth();
	const { totalCount: cartCount } = useCart();
	const pathname = usePathname();
	const dragScroll = useDragScroll<HTMLDivElement>();

	const scrollTabs = useCallback((dir: 'left' | 'right') => {
		const el = dragScroll.ref.current;
		if (!el) {
			return;
		}

		el.scrollBy({ left: dir === 'left' ? -SCROLL_AMOUNT : SCROLL_AMOUNT, behavior: 'smooth' });
	}, [dragScroll.ref]);

	const handlePopupCharge = useCallback(() => {
		const w = 450, h = 635;
		const left = window.screenX + (window.outerWidth - w) / 2;
		const top = window.screenY + (window.outerHeight - h) / 2;
		window.open('/charge', 'charge', `width=${w},height=${h},left=${left},top=${top},scrollbars=no,resizable=no`);
	}, []);

	return (
		<header id='header' className={Styles.header}>

			{/* 1줄: 로고 + 우측 아이콘 (PC에서는 전체 내비) */}
			<div className={Styles.headerRow1}>
				<button type='button' className={Styles.hamburger} onClick={onToggle} aria-label='메뉴'>
					<FontAwesomeIcon icon={sidebarOpen ? faXmark : faBars} />
				</button>

				<Link href='/' className={Styles.logo} aria-label="DPOT 홈">
					<Logo size="sm" />
				</Link>

				{/* PC 내비게이션 */}
				<nav className={Styles.pcNav}>
					<ul className='flex gap-4'>
						{navItems.map(item => (
							<li key={item.label}>
								<Link href={item.href}>{item.label}</Link>
							</li>
						))}
					</ul>
				</nav>

				{/* 우측 아이콘 (항상 표시) */}
				<div className={Styles.headerActions}>
					<Link href="/cart" className={Styles.cartBtn} title="장바구니" aria-label="장바구니">
						<FontAwesomeIcon icon={faCartShopping} />
						{cartCount > 0 && (
							<span className={Styles.cartBadge}>{cartCount > 99 ? '99+' : cartCount}</span>
						)}
					</Link>
					{isAuthenticated && (
						<>
							<button type="button" className={Styles.chargeBtn} onClick={handlePopupCharge} title="포인트 충전">
								<PointChargeIcon width={24} height={24} />
							</button>
							<NotificationBell />
						</>
					)}
					<Profile />
				</div>
			</div>

			{/* 2줄: 모바일 전용 가로 스크롤 탭 */}
			<div className={Styles.headerRow2}>
				<button type='button' className={Styles.scrollArrow} onClick={() => scrollTabs('left')} aria-label='왼쪽 스크롤'>
					<FontAwesomeIcon icon={faChevronLeft} />
				</button>
				<div
					className={Styles.mobileTabScroll}
					ref={dragScroll.ref}
					onMouseDown={dragScroll.onMouseDown}
					onMouseMove={dragScroll.onMouseMove}
					onMouseUp={dragScroll.onMouseUp}
					onMouseLeave={dragScroll.onMouseLeave}
				>
					{navItems.map(item => (
						<Link
							key={item.label}
							href={item.href}
							className={`${Styles.mobileTab}${pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href)) ? ` ${Styles.mobileTabActive}` : ''}`}
						>
							{item.label}
						</Link>
					))}
				</div>
				<button type='button' className={Styles.scrollArrow} onClick={() => scrollTabs('right')} aria-label='오른쪽 스크롤'>
					<FontAwesomeIcon icon={faChevronRight} />
				</button>
			</div>
		</header>
	);
}