import React from 'react'
import Link from 'next/link'
import type { Metadata } from 'next'
import './admin.css'

export const metadata: Metadata = { title: 'Admin — OndeVoar.pt' }

const NAV = [
  { href: '/admin', label: 'Dashboard' },
  { href: '/admin/spots', label: 'Spots' },
  { href: '/admin/reviews', label: 'Reviews' },
  { href: '/admin/users', label: 'Utilizadores' },
]

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="admin-shell">
      <aside className="admin-sidebar">
        <div className="admin-sidebar-header">
          <Link href="/admin" className="admin-sidebar-brand">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Backoffice
          </Link>
        </div>

        <nav className="admin-sidebar-nav" aria-label="Navegação admin">
          {NAV.map(({ href, label }) => (
            <Link key={href} href={href} className="admin-sidebar-link">
              {label}
            </Link>
          ))}
        </nav>

        <div className="admin-sidebar-footer">
          <Link href="/" className="admin-sidebar-link admin-sidebar-link--muted">
            ← Voltar ao site
          </Link>
        </div>
      </aside>

      <main className="admin-main">
        {children}
      </main>
    </div>
  )
}