import { Outlet } from "react-router-dom"
import { Command } from "lucide-react"

import { SettingsMenu } from "../components/SettingsMenu"
import { useTranslation } from "../hooks/useTranslation"
import { AuthSideVisual } from "./auth/AuthSideVisual"

export default function Auth() {
  const { t } = useTranslation()

  return (
    <div className="container relative grid min-h-screen flex-col items-center justify-center bg-white transition-colors lg:h-screen lg:max-w-none lg:grid-cols-2 lg:overflow-hidden lg:px-0 dark:bg-slate-950">
      <div className="absolute inset-e-4 top-4 z-50 md:inset-e-8 md:top-8">
        <SettingsMenu />
      </div>

      <div className="relative hidden h-full overflow-hidden flex-col border-e border-slate-200 bg-slate-50 p-5 text-slate-950 dark:border-slate-800 dark:bg-slate-900/50 dark:text-white xl:p-6 2xl:p-10 lg:flex">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.16),transparent_30%),radial-gradient(circle_at_80%_65%,rgba(16,185,129,0.12),transparent_32%)] dark:bg-[radial-gradient(circle_at_20%_20%,rgba(96,165,250,0.13),transparent_30%),radial-gradient(circle_at_80%_65%,rgba(45,212,191,0.09),transparent_32%)]" />
        <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(15,23,42,0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(15,23,42,0.05)_1px,transparent_1px)] bg-[size:4rem_4rem] opacity-50 dark:bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)]" />

        <div className="relative z-20 flex items-center gap-2 text-lg font-medium">
          <Command className="h-6 w-6" />
          {t.title || "Qlockify"}
        </div>

        <AuthSideVisual />
      </div>

      <div className="flex h-screen items-center justify-center p-5 sm:p-6 lg:p-6 2xl:p-8">
        <div className="mx-auto flex w-full max-w-[26rem] flex-col justify-center">
          <Outlet />
        </div>
      </div>
    </div>
  )
}