import { Skeleton } from "@/components/ui/skeleton"
import { Button } from "@/components/ui/button"
import { Ship, Loader2, GlobeIcon, ChevronDownIcon } from "lucide-react"
import Link from "next/link"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export function LoginFormSkeleton() {
  return (
    <div className="container relative flex h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
      {/* Left Content */}
      <div className="flex flex-col w-full h-screen lg:p-2">
        {/* Top bar with Logo + eVCP (left) and "Request Vendor Repository" (right) */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Ship className="w-4 h-4" />
            <span className="text-md font-bold">eVCP</span>
          </div>
          <Link
            href="/partners/repository"
            className={cn(buttonVariants({ variant: "ghost" }))}
          >
            Request Vendor Repository
          </Link>
        </div>

        {/* Content section that occupies remaining space, centered vertically */}
        <div className="flex-1 flex items-center justify-center">
          {/* Form container */}
          <div className="mx-auto w-full flex flex-col space-y-6 sm:w-[350px]">
            <div className="p-6 md:p-8">
              <div className="flex flex-col gap-6">
                <div className="flex flex-col items-center text-center">
                  <Skeleton className="h-8 w-48 mb-2" />
                </div>
                <div className="grid gap-2">
                  <Skeleton className="h-10 w-full" />
                </div>
                <Skeleton className="h-10 w-full" />
                <div className="text-center text-sm mx-auto">
                  <Button variant="ghost" className="flex items-center gap-2" disabled>
                    <GlobeIcon className="h-4 w-4" />
                    <Skeleton className="h-4 w-16" />
                    <ChevronDownIcon className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>

            <div className="text-balance text-center">
              <Skeleton className="h-4 w-[280px] mx-auto" />
            </div>
          </div>
        </div>
      </div>

      {/* Right BG 이미지 영역 */}
      <div className="relative hidden h-full flex-col p-10 text-white dark:border-r md:flex">
        <div className="absolute inset-0 bg-zinc-100 animate-pulse" />
        <div className="relative z-20 flex items-center text-lg font-medium">
          {/* Optional top-right content on the image side */}
        </div>
        <div className="relative z-20 mt-auto">
          <blockquote className="space-y-2">
            <Skeleton className="h-4 w-[250px] bg-white/50" />
          </blockquote>
        </div>
      </div>
    </div>
  )
}