import React from 'react';

import Button from '../components/widgets/Button';

const ViewMore = (): JSX.Element => {
  return (
    <div className="w-full h-full text-sm p-2">
      <main className="bg-white rounded-md p-5">
        <div className="flex w-full lg:w-1/2 mx-auto">
          <div className="w-full">
            <div className="flex flex-col after:flex-1">
              <div className="py-4 space-y-4">
                <div className="flex flex-col space-y-2 items-center justify-center mb-2 text-center">
                  <p className="text-lg text-black font-bold">
                    Congratulations on successfully installing the Recomaze
                  </p>
                  <p className="text-sm text-black text-center">
                    To access detailed reports login here:
                  </p>
                </div>
                <div className="pt-8 pb-5 capitalize flex justify-center items-center">
                  <a
                    href="https://app.recomaze.ai/login"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <Button
                      type="button"
                      className="text-xs py-3 flex items-center justify-center bg-black hover:bg-black/80 px-8 text-white font-bold rounded-md"
                    >
                      Login
                    </Button>
                    {/* <Button
                    type="button"
                    label="Login"
                    className="py-1 h-8 rounded text-xs min-w-[100px] flex justify-center items-center"
                  /> */}
                  </a>
                </div>
                <div className="w-full flex justify-center items-center pt-8">
                  <p className="italic text-sm font-light">
                    *Log in with your app installation account details. <br />
                    If forgotten, select{' '}
                    <a
                      href="https://app.recomaze.ai/forgot-password"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-primary hover:underline"
                    >
                      Forgot Password
                    </a>
                    .
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default ViewMore;