import type { ReactNode } from 'react';
import type { Locale } from '../i18n/utils';
import Header from './Header';
import Footer from './Footer';

export default function SiteShell({ locale, children }: { locale: Locale; children: ReactNode }) {
  return (
    <>
      {/* WCAG 2.4.1：跳到主要内容（绕过重复导航），键盘 Tab 时显现 */}
      <a href="#main-content" className="skip-link">
        {locale === 'en' ? 'Skip to main content' : locale === 'hk' ? '跳到主要內容' : '跳到主要内容'}
      </a>
      <Header locale={locale} />
      <main id="main-content" className="min-h-screen">{children}</main>
      <Footer locale={locale} />
    </>
  );
}