import React from 'react';

interface MainLayoutProps {
  children: React.ReactNode;
}

export default function MainLayout({ children }: MainLayoutProps) {
  return (
    <div className="flex h-screen bg-gray-900">
      {/* Sidebar */}
      <aside className="w-64 bg-gray-800 border-r border-gray-700 overflow-y-auto">
        <nav className="p-4 space-y-2">
          <a
            href="/"
            className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
          >
            <span className="text-xl mr-3">🏠</span>
            <span>Home</span>
          </a>
          <a
            href="/chat"
            className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
          >
            <span className="text-xl mr-3">💬</span>
            <span>Messages</span>
          </a>
          <a
            href="/calls"
            className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
          >
            <span className="text-xl mr-3">📞</span>
            <span>Calls</span>
          </a>
          <a
            href="/settings"
            className="flex items-center px-4 py-2 rounded-lg text-gray-100 hover:bg-gray-700 transition"
          >
            <span className="text-xl mr-3">⚙️</span>
            <span>Settings</span>
          </a>
        </nav>
      </aside>

      {/* Main Content */}
      <main className="flex-1 flex flex-col overflow-hidden">
        {/* Header */}
        <header className="bg-gray-800 border-b border-gray-700 px-6 py-4">
          <div className="flex justify-between items-center">
            <h1 className="text-xl font-bold text-white">AeThex Connect</h1>
            <div className="flex items-center space-x-4">
              <button className="text-gray-400 hover:text-white">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                </svg>
              </button>
              <button className="text-gray-400 hover:text-white">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10h.01M9 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </button>
            </div>
          </div>
        </header>

        {/* Content Area */}
        <div className="flex-1 overflow-auto bg-gray-900">
          {children}
        </div>
      </main>
    </div>
  );
}