import { Outlet, Link as RouterLink, useSearchParams } from 'react-router'
import { Regular as Logo } from '../../components/logo'
import Pulse from './_pulse'
import WomanImg from './woman.png'
import { Link } from './_link'

export default function Auth() {
  const [searchParams] = useSearchParams()
  const year = new Date().getFullYear()

  return (
    <>
      <div className="min-h-screen xl:grid grid-cols-3 relative">
        <div className="col-span-2 max-xl:hidden relative overflow-hidden">
          <Pulse className="absolute -inset-y-1/4" />

          <img
            src={WomanImg}
            alt="Educação que garente sua segurança"
            className="absolute bottom-0 inset-x-1/2 h-4/6"
          />

          <div className="absolute text-4xl top-12 left-12 font-bold">
            Educação que
            <br />
            garante sua segurança
          </div>

          <div className="absolute left-12 bottom-12 text-gray-600 dark:text-gray-400 space-y-0.5">
            <p>
              &copy; {year} EDUSEG<sup>&reg;</sup>. Todos os direitos
              reservados.
            </p>
          </div>
        </div>

        <div className="bg-yellow-terciary/70 dark:bg-gray-800/50 min-h-screen p-4 2xl:py-12 flex flex-col">
          <div className="flex flex-col flex-1 justify-center items-center">
            <Logo className="w-52 mb-8" />

            <div className="space-y-2.5 xl:space-y-5">
              <Outlet />
            </div>
          </div>

          <div className="text-center mt-2.5 aria-hidden:hidden">
            <Link
              to={{
                pathname: '/auth/support',
                search: searchParams.toString(),
              }}
              as={RouterLink}
              state={{ location: window.location.href }}
            >
              Precisa de ajuda? Fale conosco
            </Link>
          </div>
        </div>
      </div>
    </>
  )
}

export function Card({ children }) {
  return (
    <Container>
      <div className="space-y-2.5 xl:space-y-5 rounded-xl bg-yellow-50 dark:bg-gray-700/60 p-4 lg:p-8 drop-shadow-xs shadow-xs">
        {children}
      </div>
    </Container>
  )
}

export function Container({ children }) {
  return <div className="w-full 2xl:w-[26rem]">{children}</div>
}