import { Link } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'

export function Shell({ children }: { children: React.ReactNode }) {
  const { user, logout } = useAuth()

  return (
    <div className="min-h-screen bg-gray-100">
      <header className="flex items-center justify-between bg-medicalBlue px-6 py-4 text-white shadow-md">
        <div className="flex items-center gap-3">
          <div className="h-10 w-10 rounded-full bg-white/10 text-center text-xl font-bold leading-10">MP</div>
          <div>
            <p className="text-lg font-semibold">Marketplace Farmacêutico B2B</p>
            <p className="text-sm text-gray-100">Dashboard de Compras</p>
          </div>
        </div>
        <nav className="flex items-center gap-4 text-sm font-medium">
          <Link to="/dashboard" className="hover:underline">
            Compras
          </Link>
          <Link to="/cart" className="hover:underline">
            Carrinho
          </Link>
          <Link to="/checkout" className="hover:underline">
            Checkout
          </Link>
          <Link to="/profile" className="hover:underline">
            Perfil da Empresa
          </Link>
          {user && (
            <button
              type="button"
              onClick={logout}
              className="rounded bg-white/10 px-3 py-1 text-xs font-semibold hover:bg-white/20"
            >
              Sair ({user.role})
            </button>
          )}
        </nav>
      </header>
      <main className="px-6 py-5">{children}</main>
    </div>
  )
}
