import React from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
import BaseButtons from '../components/BaseButtons';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";

export default function Starter() {
  const textColor = useAppSelector((state) => state.style.linkColor);
  const title = 'MFT SELF HELP GROUP'
  return (
      <div>
        <Head>
          <title>{getPageTitle('Starter Page')}</title>
        </Head>

        <SectionFullScreen bg='violet'>
          <div className={`flex flex-row min-h-screen w-full`}>
          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
          <CardBox className='w-full md:w-3/5 lg:w-2/3'>
              <CardBoxComponentTitle title="Welcome to your MFT SELF HELP GROUP app!"/>

              <div className="space-y-3">
                  <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
                  <p className='text-center text-gray-500'>For guides and documentation please check
                      your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
              </div>

              <BaseButtons>
                  <BaseButton
                      href='/login'
                      label='Login'
                      color='info'
                      className='w-full'
                  />

              </BaseButtons>
              <div className='grid grid-cols-1 gap-2 lg:grid-cols-4 mt-2'>
                <div className='text-center'><a className={`${textColor}`} href='https://react.dev/'>React.js</a></div>
                <div className='text-center'><a className={`${textColor}`} href='https://tailwindcss.com/'>Tailwind CSS</a></div>
                <div className='text-center'><a className={`${textColor}`} href='https://nodejs.org/en'>Node.js</a></div>
                <div className='text-center'><a className={`${textColor}`} href='https://flatlogic.com/forum'>Flatlogic Forum</a></div>
              </div>
          </CardBox>
          </div>
        </div>
        </SectionFullScreen>
        <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
          <p className='py-6 text-sm'>© 2024 <span>{title}</span>. All rights reserved</p>
          <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
              Privacy Policy
          </Link>
        </div>
    </div>
  );
}

Starter.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
