/**
 * Application layout with navigation.
 */

import { Outlet, Link } from 'react-router-dom';
import { Code2 } from 'lucide-react';

export default function Layout(): JSX.Element {
  return (
    <div className="min-h-screen flex flex-col">
      <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center gap-2">
              <Code2 className="h-6 w-6 text-primary-600" />
              <span className="text-xl font-bold text-gray-900">AI Dev Project</span>
            </div>
            <nav className="flex items-center gap-4">
              <Link
                to="/"
                className="text-sm font-medium text-gray-700 hover:text-primary-600 transition-colors"
              >
                Home
              </Link>
            </nav>
          </div>
        </div>
      </header>

      <main className="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full">
        <Outlet />
      </main>

      <footer className="bg-white border-t border-gray-200 mt-auto">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <p className="text-sm text-gray-500 text-center">
            Built with AI assistance — {new Date().getFullYear()}
          </p>
        </div>
      </footer>
    </div>
  );
}