import Image from "next/image"
import Link from "next/link"

export default function LoginPage() {
  return (
    <div className="min-h-screen flex flex-col lg:flex-row">
      <div className="flex-1 flex items-center justify-center p-6 lg:p-10">
        <div className="w-full max-w-md space-y-8">
          <div className="text-center">
            <h1 className="text-3xl font-bold">Welcome back</h1>
            <p className="mt-2 text-gray-600">Please login with your account</p>
          </div>

          <form className="mt-8 space-y-6">
            <div className="form-control w-full">
              <label className="label">
                <span className="label-text">Email</span>
              </label>
              <input type="email" placeholder="email@example.com" className="input input-bordered w-full" required />
            </div>

            <div className="form-control w-full">
              <label className="label">
                <span className="label-text">Password</span>
              </label>
              <input type="password" placeholder="Your password" className="input input-bordered w-full" required />
              <label className="label">
                <span className="label-text-alt"></span>
                <Link href="/forgot-password" className="label-text-alt link link-hover">
                  Forgot password?
                </Link>
              </label>
            </div>

            <div className="form-control">
              <label className="label cursor-pointer justify-start gap-2">
                <input type="checkbox" className="checkbox checkbox-primary" />
                <span className="label-text">Stay logged in</span>
              </label>
            </div>

            <button className="btn btn-primary w-full">Login</button>
          </form>
        </div>
      </div>

      <div className="flex-1 bg-base-200 hidden lg:block">
        <div className="h-full w-full relative">
          <Image
            src="/login_wallpaper.jpg"
            alt="Login Illustration"
            fill
            className="object-cover"
            priority
          />
        </div>
      </div>

      <div className="h-48 bg-base-200 relative lg:hidden">
        <Image
          src="/login_wallpaper.jpg"
          alt="Login Illustration"
          fill
          className="object-cover"
          priority
        />
      </div>
    </div>
  )
}