'use client';

import packageJson from '@/package.json';

interface AppLayoutProps {
  children: React.ReactNode;
}

export default function AppLayout({ children }: AppLayoutProps) {
  const version = packageJson.version;
  const buildDate =
    process.env.NEXT_PUBLIC_BUILD_DATE ||
    new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });

  return (
    <div className="min-h-screen py-8 px-4">
      {/* Aeusserer Rahmen */}
      <div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-6">

        {/* Titel */}
        <h1 className="text-4xl font-bold text-center mb-6 tracking-tight">Stromverbrauch</h1>

        {/* Innerer Inhalt */}
        <div className="max-w-6xl mx-auto">

          {/* Tab-Leiste (nur "Verlauf") */}
          <div className="flex">
            <span
              className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1"
              style={{
                backgroundColor: '#FFFFDD',
                color: '#000000',
                borderColor: '#000000',
                borderBottom: '2px solid #FFFFDD',
                marginBottom: '-2px',
                position: 'relative',
                zIndex: 10,
              }}
            >
              Verlauf
            </span>
          </div>

          {/* Inhalts-Panel */}
          <main className="border-2 border-black rounded-b-lg rounded-tr-lg p-6 bg-[#FFFFDD]">
            {children}
          </main>

          <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
            <a href="mailto:rxf@gmx.de" className="hover:underline">
              mailto:rxf@gmx.de
            </a>
            <div>Version {version} - {buildDate}</div>
          </footer>

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