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

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

import dark from '@repo/ui/components/logo-dark.svg'

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="/">
            <img src={dark} className="h-6 lg:h-8" />
          </Link>

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

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