import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import ScriptDetail from './pages/ScriptDetail'
import DeleteScript from './pages/DeleteScript'
import Market from './pages/Market'

export default function App() {
  return (
    <div className="min-h-screen flex flex-col">
      <header className="border-b border-gray-800">
        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
          <Link to="/" className="text-xl font-bold tracking-tight hover:text-blue-400 transition-colors">
            <span className="text-blue-500">⚡</span> ScriptForge
          </Link>
          <nav className="flex gap-4 text-sm">
            <Link to="/" className="text-gray-400 hover:text-blue-400 transition-colors">市场</Link>
            <Link to="/create" className="text-gray-400 hover:text-blue-400 transition-colors">创建</Link>
          </nav>
        </div>
      </header>

      <main className="flex-1 max-w-4xl mx-auto px-4 py-8 w-full">
        <Routes>
          <Route path="/" element={<Market />} />
          <Route path="/create" element={<Home />} />
          <Route path="/s/:id" element={<ScriptDetail />} />
          <Route path="/s/:id/delete" element={<DeleteScript />} />
        </Routes>
      </main>

      <footer className="border-t border-gray-800 text-center text-xs text-gray-600 py-4">
        ScriptForge
      </footer>
    </div>
  )
}