"use client";
import { Logo } from "@/components/logo";
import { ThemeToggleSwitch } from "@/components/Layouts/header/theme-toggle";
import SigninWithPassword from "../SigninWithPassword";

export default function Signin() {
  return (
    <div>
      <div className="mb-8 mt-4 flex flex-col items-center justify-center gap-3 text-center">
        <div className="flex w-full flex-col items-center gap-4 max-sm:gap-3 sm:w-auto">
          <div className="flex w-full justify-end sm:hidden">
            <ThemeToggleSwitch />
          </div>
          <div className="rounded-2xl border border-stroke/70 bg-white/80 p-3 dark:border-dark-3 dark:bg-dark-2/70">
            <Logo />
          </div>
        </div>
        <div>
          <h1 className="text-2xl font-semibold text-dark dark:text-white">
            Welcome back
          </h1>
          <p className="mt-1 text-sm text-dark-5">
            Sign in to continue to your dashboard
          </p>
        </div>
      </div>
      <SigninWithPassword />
    </div>
  );
}
