// src/components/shared/Layout.tsx
import React from 'react';
import Navigation from './Navigation';

const Layout = ({ children }) => {
  return (
    <div className="min-h-screen bg-gray-50">
      <Navigation />
      
      <main className="max-w-7xl mx-auto px-4 py-6">
        {/* Alert for announcements */}
        <div className="mb-6 bg-blue-50 border-l-4 border-blue-500 p-4">
          <div className="flex">
            <div className="flex-1">
              <p className="text-sm text-blue-700">
                Welcome to EduAI Platform! Start your learning journey today.
              </p>
            </div>
          </div>
        </div>

        {/* Main content */}
        <div className="space-y-6">
          {children}
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-white border-t mt-12">
        <div className="max-w-7xl mx-auto px-4 py-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <h3 className="text-lg font-semibold mb-4">EduAI Platform</h3>
              <p className="text-gray-600">
                Empowering education through AI-driven personalized learning.
              </p>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">Quick Links</h3>
              <ul className="space-y-2 text-gray-600">
                <li><a href="/about" className="hover:text-blue-600">About</a></li>
                <li><a href="/help" className="hover:text-blue-600">Help Center</a></li>
                <li><a href="/privacy" className="hover:text-blue-600">Privacy Policy</a></li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">Connect</h3>
              <ul className="space-y-2 text-gray-600">
                <li><a href="/contact" className="hover:text-blue-600">Contact Us</a></li>
                <li><a href="/feedback" className="hover:text-blue-600">Feedback</a></li>
                <li><a href="/community" className="hover:text-blue-600">Community</a></li>
              </ul>
            </div>
          </div>
          <div className="mt-8 pt-8 border-t text-center text-gray-600">
            <p>&copy; {new Date().getFullYear()} EduAI Platform. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Layout;