import { ReactNode } from 'react';
import Header from './Header';

interface LayoutProps {
  children: ReactNode;
}

export default function Layout({ children }: LayoutProps) {
  return (
    <div className="min-h-screen flex flex-col">
      {/* Skip to main content link for keyboard users */}
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-synor-600 focus:text-white focus:rounded-lg focus:outline-none focus:ring-2 focus:ring-synor-400"
      >
        Skip to main content
      </a>
      <Header />
      <main id="main-content" className="flex-1 container mx-auto px-4 py-6 max-w-7xl" tabIndex={-1}>
        {children}
      </main>
      <footer className="border-t border-gray-800 py-6" role="contentinfo">
        <div className="container mx-auto px-4 max-w-7xl">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-500">
            <div className="flex items-center gap-2">
              <span className="text-synor-500 font-semibold">SYNOR</span>
              <span>Block Explorer</span>
            </div>
            <div className="flex gap-6">
              <a href="https://synor.cc" className="hover:text-gray-300 transition-colors">
                Website
              </a>
              <a href="https://docs.synor.cc" className="hover:text-gray-300 transition-colors">
                Docs
              </a>
              <a href="https://github.com/synor" className="hover:text-gray-300 transition-colors">
                GitHub
              </a>
            </div>
            <div className="text-gray-600">
              Quantum-Resistant Blockchain
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}