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

export default function Layout() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10 relative">
      <a
        href="//eduseg.com.br"
        className="flex items-center gap-0.5 absolute top-5 left-5 text-sm z-1"
      >
        <ChevronLeftIcon className="size-5" /> Página inicial
      </a>

      <div className="w-full max-w-xs relative z-1 max-lg:mt-8">
        <Outlet />
      </div>

      <div className="w-full top-1/2 max-w-sm absolute pt-12 -translate-y-1/2">
        <div
          aria-hidden="true"
          className="absolute inset-0 grid grid-cols-2 opacity-20"
        >
          <div className="blur-[106px] h-56 bg-linear-to-br to-lime-400 from-lime-700"></div>
          <div className="blur-[106px] h-42 bg-linear-to-r from-lime-400 to-lime-600"></div>
        </div>
      </div>
    </div>
  )
}
