// import { dt } from "@/lib/dt"
import { serverClient } from "@/lib/trpc/server"

import {
  EmailIcon,
  GlobeIcon,
  LocationIcon,
  LockIcon,
  PhoneIcon,
} from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

import styles from "./page.module.css"

export default async function Profile() {
  const { formatMessage } = await getIntl()
  const user = await serverClient().user.get()
  if (!user) {
    return null
  }
  // const dob = dt(user.dateOfBirth).format("DD/MM/YYYY")
  return (
    <section className={styles.container}>
      <header className={styles.header}>
        <hgroup>
          <Title as="h4" color="red" level="h1">
            {user.name}
          </Title>
          <Title as="h4" color="burgundy" level="h2">
            {user.dateOfBirth}
          </Title>
        </hgroup>
        <Button className={styles.btn} size="large" theme="primaryStrong">
          {formatMessage({ id: "Edit profile" })}
        </Button>
      </header>
      <Divider color="burgundy" opacity={8} />
      <section className={styles.profile}>
        <article className={styles.info}>
          <div className={styles.item}>
            <LocationIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Address" })}
            </Body>
            <Body color="burgundy">
              {user.address.streetAddress
                ? `${user.address.streetAddress}, `
                : ""}
              {user.address.city ? `${user.address.city}, ` : ""}
              {user.address.country ? `${user.address.country}` : ""}
              {!user.address.streetAddress &&
              !user.address.city &&
              !user.address.country
                ? "N/A"
                : null}
            </Body>
          </div>
          <div className={styles.item}>
            <EmailIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Email" })}
            </Body>
            <Body color="burgundy">{user.email}</Body>
          </div>
          <div className={styles.item}>
            <PhoneIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Phone number" })}
            </Body>
            <Body color="burgundy">{user.phoneNumber}</Body>
          </div>
          <div className={styles.item}>
            <GlobeIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Language" })}
            </Body>
            <Body color="burgundy">{user.language}</Body>
          </div>
        </article>
        <aside>
          <div className={styles.item}>
            <LockIcon color="burgundy" />
            <Body color="burgundy" textTransform="bold">
              {formatMessage({ id: "Password" })}
            </Body>
            <Body color="burgundy">**********</Body>
          </div>
        </aside>
      </section>
    </section>
  )
}
