'use client';

import { useEffect, useState } from 'react';
import LogoutButton from '@/components/LogoutButton';
import packageJson from '@/package.json';

interface AppLayoutProps {
  children: React.ReactNode;
}

export default function AppLayout({ children }: AppLayoutProps) {
  const version = packageJson.version;
  const [buildDate, setBuildDate] = useState(process.env.NEXT_PUBLIC_BUILD_DATE || '');

  useEffect(() => {
    if (!buildDate) {
      setBuildDate(new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }));
    }
  }, []);

  return (
    <div className="app-wrapper">
      <div className="app-container">

        {/* Seitentitel */}
        <h1 className="app-title">Tabletten-Check</h1>

        <div className="app-inner">

          {/* Logout-Button oben rechts */}
          <div className="app-logout-bar">
            <LogoutButton className="btn-logout" />
          </div>

          {/* Inhaltsbereich */}
          <main className="app-main">
            {children}
          </main>

          <footer className="app-footer">
            <a href="mailto:rxf@gmx.de">
              mailto:rxf@gmx.de
            </a>
            <div>Version {version} – {buildDate}</div>
          </footer>

        </div>
      </div>
    </div>
  );
}