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 incial
      </a>
      <div className="w-full max-w-sm relative z-1">
        <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-gradient-to-br to-lime-400 from-lime-700"></div>
          <div className="blur-[106px] h-42 bg-gradient-to-r from-lime-400 to-lime-600"></div>
        </div>
      </div>
    </div>
  )
}