import React from 'react';

interface LayoutProps {
  children: React.ReactNode;
  activeTab: 'compressor' | 'resizer' | 'watermark' | 'gallery';
  onTabChange: (tab: 'compressor' | 'resizer' | 'watermark' | 'gallery') => void;
}

const Layout: React.FC<LayoutProps> = ({ children, activeTab, onTabChange }) => {
  return (
    <div className="min-h-screen flex flex-col">
      <header className="border-b border-slate-200 sticky top-0 bg-white z-50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center space-x-2 flex-shrink-0 mr-4">
            <div className="w-8 h-8 bg-black rounded flex items-center justify-center">
              <span className="text-white font-bold" aria-hidden="true">O</span>
            </div>
            <p className="text-lg sm:text-xl font-bold tracking-tight whitespace-nowrap hidden xs:block text-black">OptiImage</p>
          </div>

          <nav className="flex items-center space-x-1 overflow-x-auto no-scrollbar py-2 ml-auto" role="tablist" aria-label="Tool selection">
            {['compressor', 'resizer', 'watermark', 'gallery'].map((tab) => (
              <button
                key={tab}
                id={`${tab}-tab`}
                role="tab"
                aria-selected={activeTab === tab}
                aria-controls="tool-panel"
                onClick={() => onTabChange(tab as any)}
                className={`px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm font-medium rounded-md transition-colors capitalize whitespace-nowrap ${
                  activeTab === tab
                    ? 'bg-black text-white'
                    : 'text-slate-600 hover:text-black hover:bg-slate-100'
                }`}
              >
                {tab}
              </button>
            ))}
          </nav>
        </div>
      </header>

      <main className="flex-grow max-w-6xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
        <div 
          id="tool-panel" 
          role="tabpanel" 
          aria-labelledby={`${activeTab}-tab`}
          className="w-full"
        >
          {children}
        </div>
      </main>

      {/* Global Adsterra Direct Link Section */}
      <section className="max-w-6xl mx-auto w-full px-4 sm:px-6 lg:px-8 mb-8">
        <a 
          href="https://cutterbewilderedvile.com/g1jpi04cj?key=21e7930921e6e8f0b6263bf0747bc114" 
          target="_blank" 
          rel="noopener noreferrer sponsored"
          className="block w-full p-6 sm:p-8 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-2xl text-white text-center shadow-lg hover:shadow-xl transition-all hover:scale-[1.01] active:scale-[0.99] group"
        >
          <h3 className="text-xl sm:text-2xl font-extrabold mb-2 group-hover:underline decoration-2 underline-offset-4">Looking for faster Image Processing?</h3>
          <p className="text-sm sm:text-base text-blue-100 opacity-90">Download our recommended professional desktop tool for ultimate speed and 8K support. Click to learn more.</p>
          <div className="mt-4 inline-flex items-center space-x-2 bg-white text-blue-700 px-6 py-2.5 rounded-full font-bold text-sm sm:text-base">
            <span>Access Professional Tool</span>
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
          </div>
        </a>
      </section>

      <footer className="border-t border-slate-200 py-6 sm:py-12 bg-slate-50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center text-center md:text-left">
            <div>
              <p className="text-slate-900 font-bold text-lg mb-2">OptiImage Professional Platform</p>
              <p className="text-slate-500 text-sm">The world's most advanced browser-based image optimization suite. 100% private, 100% free.</p>
            </div>
            <div className="text-slate-500 text-xs sm:text-sm md:text-right">
              <p>© {new Date().getFullYear()} OptiImage. All Rights Reserved.</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Layout;