import React, { FC } from 'react'

import useCustomer from '@framework/use-customer'
import { Container, Text } from '@components/ui'
import { Module } from '@agility/nextjs'

interface Fields {
	heading: string,
	fullNameLabel: string,
	emailLabel: string,
	notLoggedInMessage: string
}


const ProfileModule:Module<Fields> = ({ module: {fields}}) => {

	const { data } = useCustomer()
  return (
    <Container>
      <Text variant="pageHeading">{fields.heading}</Text>
      {data && (
        <div className="grid lg:grid-cols-12">
          <div className="lg:col-span-8 pr-4">
            <div>
              <Text variant="sectionHeading">{fields.fullNameLabel}</Text>
              <span>
                {data.firstName} {data.lastName}
              </span>
            </div>
            <div className="mt-5">
              <Text variant="sectionHeading">{fields.emailLabel}</Text>
              <span>{data.email}</span>
            </div>
          </div>
        </div>
      )}

	  { !data &&
	  	<Text variant="body">{fields.notLoggedInMessage}</Text>
	  }
    </Container>
  )
}

export default ProfileModule