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="flex min-h-svh w-full items-center justify-center p-6 md:p-10 relative">
        <Link
          to="/"
          className="flex items-center gap-0.5 absolute top-5 left-5 text-sm z-2"
        >
          <ChevronLeftIcon className="size-5" /> Voltar
        </Link>

        <div className="w-full max-w-xs relative max-sm:mt-10 z-1 space-y-6">
          <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>
    </>
  )
}
