import { mdiAccountCircle } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';
import CardBox from '../components/CardBox';
import LayoutAuthenticated from '../layouts/Authenticated';
import SectionMain from '../components/SectionMain';
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';

const UserInfo = () => {
  const { currentUser } = useAppSelector((state) => state.auth);

  return (
    <>
      <Head>
        <title>{getPageTitle('User Info')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiAccountCircle} title="User Info" main>
          {' '}
        </SectionTitleLineWithButton>
        <CardBox>
          {currentUser ? (
            <dl className="grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-2">
              <div>
                <dt className="text-sm font-medium text-gray-500">First Name</dt>
                <dd className="mt-1 text-sm text-gray-900">{currentUser.firstName}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-gray-500">Last Name</dt>
                <dd className="mt-1 text-sm text-gray-900">{currentUser.lastName}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-gray-500">Email</dt>
                <dd className="mt-1 text-sm text-gray-900">{currentUser.email}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-gray-500">Phone Number</dt>
                <dd className="mt-1 text-sm text-gray-900">{currentUser.phoneNumber}</dd>
              </div>
            </dl>
          ) : (
            <p>User information not available.</p>
          )}
        </CardBox>
      </SectionMain>
    </>
  );
};

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

export default UserInfo;
