"use client";

import Image from "next/image";

const AuthLayout = ({ children }: { children: React.ReactNode }) => (
	<div
		className="hero min-h-screen"
		style={{
			backgroundImage: "url('/bg.png')",
		}}
	>
		<div className="hero-overlay bg-neutral/60"></div>
		<div className="hero-content text-center ">
			<div className="max-w-lg">
				{/* Logo above the card */}
				<Image
					src="/mail/var_logo.png"
					alt="VAR Logo"
					width={128}
					height={128}
					className="mx-auto mb-6 w-40 h-auto"
					priority
				/>
				<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
					{children}
				</div>
			</div>
		</div>
	</div>
);

export default AuthLayout;