'use client';

import { usePathname } from 'next/navigation';
import { Header, SurveyHeader, LoadingOverlay, ErrorMessage } from '../components/layout/Common';
import { useDiagnosis } from './contexts/DiagnosisContext';

export default function LayoutContent({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { currentIndex, surveyItems, loading, error, setError } = useDiagnosis();

  const isSurvey = pathname === '/survey';
  const isResult = pathname === '/result';

  return (
    <div className="min-h-screen flex flex-col bg-slate-50 font-sans text-slate-900 selection:bg-cyan-100 selection:text-cyan-900">
      {loading && <LoadingOverlay />}
      
      {isSurvey ? (
        <SurveyHeader current={currentIndex + 1} total={surveyItems.length || 10} />
      ) : isResult ? null : (
        <Header />
      )}

      <main className="relative flex-grow bg-slate-50 px-3 sm:px-4 py-6 sm:py-8">
        {error ? (
          <div className="max-w-xl mx-auto mt-20">
            <ErrorMessage 
              message={error} 
              onRetry={() => {
                setError(null);
                window.location.reload();
              }} 
            />
          </div>
        ) : (
          children
        )}
      </main>

      <footer className="min-h-20 border-t border-slate-100 bg-white flex items-center justify-center shrink-0 px-4 py-4">
        <p className="text-center text-xs sm:text-sm font-medium text-slate-500">
          © 2026 시앤피컨설팅 주식회사. All rights reserved.
        </p>
      </footer>
    </div>
  );
}