import Link from 'next/link'
import { LayoutDashboard, Home, MessageSquare, Images, LogOut } from 'lucide-react'
import Image from 'next/image'

const navItems = [
  { href: '/tr/admin', label: 'Dashboard', icon: LayoutDashboard },
  { href: '/tr/admin/units', label: 'Daireler', icon: Home },
  { href: '/tr/admin/messages', label: 'Mesajlar', icon: MessageSquare },
  { href: '/tr/admin/gallery', label: 'Galeri', icon: Images },
]

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-gray-50 flex">
      {/* Sidebar */}
      <aside className="w-64 bg-vesta-dark flex flex-col min-h-screen fixed left-0 top-0 bottom-0">
        <div className="p-6 border-b border-white/10">
          <Image
            src="https://cdn.prod.website-files.com/6693a42300f08d15d3514511/6694e59f468a02af6267826d_H%20FULL%20LOGO%20-%20WHITE.png"
            alt="Vesta Muğla"
            width={130}
            height={32}
            className="h-7 w-auto object-contain"
          />
          <p className="text-white/30 text-xs mt-1">Admin Paneli</p>
        </div>

        <nav className="flex-1 p-4 space-y-1">
          {navItems.map((item) => {
            const Icon = item.icon
            return (
              <Link
                key={item.href}
                href={item.href}
                className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-white/60 hover:text-white hover:bg-white/10 transition-colors text-sm"
              >
                <Icon className="w-4 h-4" />
                {item.label}
              </Link>
            )
          })}
        </nav>

        <div className="p-4 border-t border-white/10">
          <Link
            href="/tr"
            className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-white/40 hover:text-white/60 transition-colors text-sm"
          >
            <LogOut className="w-4 h-4" />
            Siteye Dön
          </Link>
        </div>
      </aside>

      {/* Main */}
      <main className="ml-64 flex-1 p-8">
        {children}
      </main>
    </div>
  )
}