import { motion } from "framer-motion";
import Login from "../partials/auth/Login";
import authBg from "../assets/images/auth-bg.png";

export const Auth = () => {
  return (
    <div
      className="relative flex items-center justify-center min-h-screen h-screen overflow-y-auto bg-cover bg-center bg-no-repeat"
      style={{
        backgroundImage: `url(${authBg})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundAttachment: "fixed",
      }}
    >
      <div className="absolute inset-0 bg-black/10 dark:bg-black/30" />
      <motion.div
        initial={{ scale: 0.95, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.3 }}
        className="relative z-10 w-full max-w-md px-4 py-4"
      >
        <Login />
      </motion.div>
    </div>
  );
};
