import '../styles/globals.css'
import { useState, useEffect } from 'react'
import { Shield } from 'lucide-react'

function MyApp({ Component, pageProps }) {
  const [isDarkMode, setIsDarkMode] = useState(true)

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme) {
      setIsDarkMode(savedTheme === 'dark')
    }
  }, [])

  const toggleTheme = () => {
    const newTheme = !isDarkMode
    setIsDarkMode(newTheme)
    localStorage.setItem('theme', newTheme ? 'dark' : 'light')
  }

  return (
    <div className={isDarkMode ? 'dark' : ''}>
      <div className="min-h-screen bg-white dark:bg-dark-900 text-dark-900 dark:text-dark-100 transition-colors duration-300">
        <header className="border-b border-dark-200 dark:border-dark-700">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              <div className="flex items-center space-x-3">
                <Shield className="h-8 w-8 text-primary-500" />
                <h1 className="text-xl font-bold">SecureAgent Platform</h1>
              </div>
              <div className="flex items-center space-x-4">
                <a 
                  href="https://huggingface.co/spaces/akhaliq/anycoder" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="text-sm text-primary-500 hover:text-primary-400 transition-colors"
                >
                  Built with anycoder
                </a>
                <button
                  onClick={toggleTheme}
                  className="p-2 rounded-lg bg-dark-100 dark:bg-dark-800 hover:bg-dark-200 dark:hover:bg-dark-700 transition-colors"
                >
                  {isDarkMode ? '☀️' : '🌙'}
                </button>
              </div>
            </div>
          </div>
        </header>
        <Component {...pageProps} />
      </div>
    </div>
  )
}

export default MyApp