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

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

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

  return (
    <div className="container relative min-h-screen grid flex-col items-center justify-center bg-white transition-colors lg:max-w-none lg:grid-cols-2 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 flex-col border-e border-slate-200 bg-slate-900 p-10 text-white dark:border-slate-800 dark:bg-slate-900/50 lg:flex">
        <div className="relative z-20 flex items-center gap-2 text-lg font-medium">
          <Command className="h-6 w-6" />
          {t.title || "Qlockify"}
        </div>

        <div className="relative z-20 mt-auto">
          <blockquote className="space-y-2">
            <p className="text-lg">"{t.login.brandingQuote}"</p>
          </blockquote>
        </div>
      </div>

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