import { NavLink } from 'react-router-dom';
import { ChevronLeft } from 'lucide-react';

/**
 * 모바일 헤더 컴포넌트
 * @param {string} title - 페이지 제목 (없으면 fromis_9)
 * @param {boolean} noShadow - 그림자 숨김 여부
 * @param {boolean} showBack - 뒤로가기 버튼 표시 여부
 */
function MobileHeader({ title, noShadow = false, showBack = false }) {
  return (
    <header
      className={`bg-white sticky top-0 z-50 ${noShadow ? '' : 'shadow-sm'}`}
    >
      <div className="flex items-center h-14 px-2">
        {showBack ? (
          <button onClick={() => window.history.back()} className="p-2 rounded-lg active:bg-gray-100 text-gray-600">
            <ChevronLeft size={22} />
          </button>
        ) : (
          <div className="w-9" />
        )}
        <div className="flex-1 text-center">
          {title ? (
            <span className="text-xl font-bold text-primary">{title}</span>
          ) : (
            <NavLink to="/" className="text-xl font-bold text-primary">
              fromis_9
            </NavLink>
          )}
        </div>
        <div className="w-9" />
      </div>
    </header>
  );
}

export default MobileHeader;