import type { Route } from './+types'

import { Link, Outlet } from 'react-router'

import logo from '@/components/logo.svg'
import { NavUser } from '@/components/nav-user'
import { userContext } from '@/context'
import { authMiddleware } from '@/middleware/auth'

export const middleware: Route.MiddlewareFunction[] = [authMiddleware]

export async function loader({ context }: Route.ActionArgs) {
  const user = context.get(userContext)
  return Response.json({ user })
}

export default function Component({ loaderData }: Route.ComponentProps) {
  const { user } = loaderData

  return (
    <div className="relative flex flex-col flex-1 min-w-0">
      <header
        className="bg-background/15 backdrop-blur-sm
                   px-4 py-2 lg:py-4 sticky top-0 z-5"
      >
        <div className="container mx-auto flex items-center">
          <Link to="/" className="flex items-start gap-1">
            <img src={logo} className="h-6 lg:h-8" />
            <span className="text-muted-foreground text-xs">Estúdio</span>
          </Link>

          <div className="ml-auto">
            <NavUser user={user} />
          </div>
        </div>
      </header>

      <main className="p-4">
        <div className="container mx-auto">
          <Outlet />
        </div>
      </main>
    </div>
  )
}