'use client'
import Image from 'next/image'
import { LoginForm } from './components/login-form'
import { LeftPanel } from './components/LeftPanel'
import { IconButton } from '@/components/ui/button'
import { useRouter } from 'next/navigation'

const scrollBg = '/images/login/v1/bg.png'
const images = [
  '/images/login/v1/1.png',
  '/images/login/v1/2.png',
  '/images/login/v1/3.png',
  '/images/login/v1/4.png',
  '/images/login/v1/5.png',
  '/images/login/v1/6.png',
  '/images/login/v1/7.png',
  '/images/login/v1/8.png',
  '/images/login/v1/9.png',
  '/images/login/v1/10.png',
]

export default function LoginPage() {
  const router = useRouter()

  const handleClose = () => {
    router.replace('/')
  }

  return (
    <div className="flex h-screen realoative w-screen overflow-hidden">
      <IconButton
        iconfont="icon-close"
        variant="tertiaryDark"
        size="large"
        className="absolute top-6 left-6 z-20"
        onClick={handleClose}
      />

      <div className="relative flex w-full flex-col items-center justify-center px-6">
        {/* Logo */}
        <div className="relative mb-8 h-[48px] w-[120px] sm:mb-12 sm:h-[64px] sm:w-[160px]">
          <Image src="/logo.svg" alt="Crush Level" fill className="object-contain" priority />
        </div>

        {/* 登录表单 */}
        <div className="w-full max-w-[340px]">
          <LoginForm />
        </div>
      </div>
    </div>
  )
}