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

import {
  CalendarIcon,
  EmailIcon,
  HouseIcon,
  PhoneIcon,
} from "@/components/Icons"
import { countries } from "@/components/TempDesignSystem/Form/Country/countries"

import Field from "../Field"
import Container from "./Container"

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

export default async function Profile() {
  const user = await serverClient().user.get()
  const countryName = countries.find(
    (country) => country.code === user.address.country
  )
  const dob = dt(user.dateOfBirth).format("DD/MM/YYYY")
  return (
    <Container user={user}>
      <section className={styles.info}>
        <Field>
          <Field.Icon>{user.address.country}</Field.Icon>
          <Field.TextLabel>{_("Country")}</Field.TextLabel>
          <Field.Content>{countryName?.name}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <CalendarIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Date of Birth")}</Field.TextLabel>
          <Field.Content>{dob}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <EmailIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Email")}</Field.TextLabel>
          <Field.Content>{user.email}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <PhoneIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Phone number")}</Field.TextLabel>
          <Field.Content>{user.phoneNumber}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Address")}</Field.TextLabel>
          <Field.Content>{user.address.streetAddress || "-"}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{_("City/State")}</Field.TextLabel>
          <Field.Content>{user.address.city || "-"}</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Zip code")}</Field.TextLabel>
          <Field.Content>{user.address.zipCode}</Field.Content>
        </Field>
      </section>
    </Container>
  )
}