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

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

import logo from '@repo/ui/components/logo2.svg'
import { authMiddleware } from '@repo/auth/middleware/auth'

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

export function meta({}: Route.MetaArgs) {
  return [{ title: 'Crie sua empresa' }]
}

export default function Route({}: Route.ComponentProps) {
  return (
    <>
      <div className="min-h-dvh flex items-center justify-center overflow-auto">
        <Link
          to="/"
          className="text-sm absolute left-4 top-6 flex items-center gap-1 z-10 hover:underline"
        >
          <ChevronLeftIcon className="size-5" /> Voltar
        </Link>

        <div className="w-full max-w-sm pt-8 relative z-10 space-y-6 px-4">
          <div className="flex justify-center">
            <div className="border border-white/15 bg-white/5 px-2.5 py-3 rounded-xl">
              <img src={logo} alt="EDUSEG®" className="block size-12" />
            </div>
          </div>

          <Outlet />
        </div>
      </div>
    </>
  )
}