import React from 'react'

import { Paper, Title, Text } from '@mantine/core'

import { AppLayout } from '~/components/Layout'
import { useUserStore } from '~/hooks/state'
import { formatDateTime } from '~/utils/date-time'

import InternalApiKeys from './InternalApiKeys'

const ProfilePage: React.FC = () => {
  const user = useUserStore((state) => state.user)

  return (
    <AppLayout>
      <div className='m-auto max-w-screen-md'>
        <Title order={1} className='text-center py-8'>
          Profile
        </Title>

        <Paper shadow='xs' p='md' withBorder>
          <div className='grid grid-cols-[84px_1fr] gap-2'>
            <span>User Name:</span>
            <Text component='span' color='dimmed'>
              {user?.userName}
            </Text>
            <span>Created At:</span>
            <Text component='span' color='dimmed'>
              {formatDateTime(user?.createdAt ?? 0)}
            </Text>
          </div>
        </Paper>

        {user?.internal && (
          <Paper shadow='xs' p='md' withBorder className='mt-6'>
            <Title order={3} className='mb-4'>
              Internal API Keys
            </Title>
            <InternalApiKeys />
          </Paper>
        )}
      </div>
    </AppLayout>
  )
}

export default ProfilePage