import { Link, useLocation } from 'react-router-dom'
import { LayoutDashboard, FileText, History, Cpu } from 'lucide-react'

interface LayoutProps {
    children: React.ReactNode
}

const Layout = ({ children }: LayoutProps) => {
    const location = useLocation()

    const navItems = [
        { path: '/', icon: LayoutDashboard, label: '대시보드' },
        { path: '/rules', icon: FileText, label: '전략 룰 설정' },
        { path: '/trades', icon: History, label: '매매 로그' },
        { path: '/mcp', icon: Cpu, label: 'MCP 상태' },
    ]

    return (
        <div className="min-h-screen bg-slate-900">
            {/* Header */}
            <header className="bg-slate-800 border-b border-slate-700">
                <div className="container mx-auto px-4 py-4">
                    <h1 className="text-2xl font-bold text-white">
                        Auto Stock Trading System
                    </h1>
                    <p className="text-slate-400 text-sm">
                        Claude AI & MCP 기반 자동 매매 시스템
                    </p>
                </div>
            </header>

            <div className="flex">
                {/* Sidebar */}
                <aside className="w-64 bg-slate-800 min-h-[calc(100vh-73px)] border-r border-slate-700">
                    <nav className="p-4 space-y-2">
                        {navItems.map((item) => {
                            const Icon = item.icon
                            const isActive = location.pathname === item.path

                            return (
                                <Link
                                    key={item.path}
                                    to={item.path}
                                    className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${isActive
                                            ? 'bg-primary text-white'
                                            : 'text-slate-400 hover:bg-slate-700 hover:text-white'
                                        }`}
                                >
                                    <Icon size={20} />
                                    <span>{item.label}</span>
                                </Link>
                            )
                        })}
                    </nav>
                </aside>

                {/* Main Content */}
                <main className="flex-1 p-6">
                    {children}
                </main>
            </div>
        </div>
    )
}

export default Layout