import { Card, CardContent } from "@/components/ui/card";
import AccountList from "@/feature/AccountList";
import type { FC } from "react";

const AuthenticatePage: FC = () => {
  return (
    <div className="relative z-10 flex items-center justify-center min-h-screen">
      <Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
        <div className="flex sm:flex-row flex-col sm:items-stretch items-center pt-16 sm:pt-0">
          <div className="flex flex-col items-center flex-1">
            <img
              src="/icon.png"
              alt="icon"
              className="w-16 h-16 mb-4 mt-2 sm:mt-6"
            />

            <div className="px-4 sm:mt-4 mt-8">
              <h2 className="text-2xl font-bold text-gray-800 text-left w-full dark:text-gray-100">
                Select Account
              </h2>
              <h4 className="text-base mb-3 text-gray-400 text-left dark:text-gray-300">
                Choose one of the accounts below in order to proceed to home lab
                services and tools.
              </h4>
            </div>
          </div>

          {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
          <CardContent className="w-full space-y-4 flex-1">
            <AccountList />
          </CardContent>
        </div>
      </Card>
    </div>
  );
};

export default AuthenticatePage;