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

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

import { userContext } from '@repo/auth/context'
import { authMiddleware } from '@repo/auth/middleware/auth'
import { ModeToggle, ThemedImage } from '@repo/ui/components/dark-mode'
import { NavUser } from '@repo/ui/components/nav-user'

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="/">
            <ThemedImage className="flex gap-1">
              <span className="text-muted-foreground text-xs">Estúdio</span>
            </ThemedImage>
          </Link>

          <div className="ml-auto flex gap-2.5 items-center">
            <ModeToggle />
            <NavUser user={user} />
          </div>
        </div>
      </header>

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