import { _ } from "@/lib/translation"

import {
  CalendarIcon,
  EmailIcon,
  HouseIcon,
  PhoneIcon,
} from "@/components/Icons"
import Container from "./Container"
import Field from "../Field"

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

import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"

export default function Profile(props: ProfileProps) {
  return (
    <Container {...props}>
      <section className={styles.info}>
        <Field>
          <Field.Icon>SE</Field.Icon>
          <Field.TextLabel>{_("Country")}</Field.TextLabel>
          <Field.Content>Sweden</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <CalendarIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Date of Birth")}</Field.TextLabel>
          <Field.Content>27/05/1977</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <EmailIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Email")}</Field.TextLabel>
          <Field.Content>f*********@g****.com</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <PhoneIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Phone number")}</Field.TextLabel>
          <Field.Content>+46 ******00</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Address")}</Field.TextLabel>
          <Field.Content>T***************</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{_("City/State")}</Field.TextLabel>
          <Field.Content>S*******</Field.Content>
        </Field>
        <Field>
          <Field.Icon>
            <HouseIcon />
          </Field.Icon>
          <Field.TextLabel>{_("Zip code")}</Field.TextLabel>
          <Field.Content>1****</Field.Content>
        </Field>
      </section>
    </Container>
  )
}