"use client";

import { useAuth } from "@/components/AuthProvider";
import { en } from "@/lib/i18n/en";
import { getDisplayName } from "@/lib/userName";
import styles from "./CustomerHome.module.css";

export default function CustomerProfile() {
  const { user } = useAuth();

  return (
    <div className={styles.page}>
      <header className={styles.head}>
        <div>
          <h1 className={styles.title}>{en.customerProfile.title}</h1>
          <p className={styles.lead}>{en.customerProfile.lead}</p>
        </div>
      </header>

      <section className={styles.card}>
        <dl className={styles.list}>
          <div className={styles.row}>
            <dt>{en.customerProfile.name}</dt>
            <dd>{getDisplayName(user)}</dd>
          </div>
          <div className={styles.row}>
            <dt>{en.customerProfile.phone}</dt>
            <dd dir="ltr">{user?.cellNumber || "—"}</dd>
          </div>
          <div className={styles.row}>
            <dt>{en.customerProfile.email}</dt>
            <dd>{user?.email?.trim() || en.customerProfile.emptyEmail}</dd>
          </div>
        </dl>
      </section>
    </div>
  );
}