import createUseStyles from "@/theme/createUseStyles";

import PageHeader from "../home/components/PageHeader";
import LoginForm from "./components/LoginForm";
import { cn } from "@/util/cn";

const useStyles = createUseStyles(({ sizes, media }) => ({
  loginPage: {
    maxWidth: sizes.maxWidthValue,
    [media.md]: {
      padding: "var(--spacing-l)",
    },
  },
  loginPageForm: {
    [media.md]: {
      height: "60%",
      minWidth: 400,
      paddingTop: 0,
      width: 450,
    },
  },
}));

export default function LoginPage() {
  const classes = useStyles();

  return (
    <div className={cn("flex flex-col p-m w-full m-auto h-screen", classes.loginPage)}>
      <PageHeader />
      <div className={cn("flex flex-col justify-center pt-l align-self-center w-full", classes.loginPageForm)}>
        <LoginForm />
      </div>
    </div>
  );
}
