import { Avatar } from "@scandic-hotels/design-system/Avatar"
import { Typography } from "@scandic-hotels/design-system/Typography"

import CopyMembershipIdButton from "@/components/MyPages/CopyMembershipIdButton"
import { getIntl } from "@/i18n"
import { getInitials } from "@/utils/user"

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

import type { User } from "@scandic-hotels/trpc/types/user"

interface UserBaseInfoProps {
  user: User
}

export default async function UserBaseInfo({ user }: UserBaseInfoProps) {
  const intl = await getIntl()
  const initials = getInitials(user.firstName, user.lastName)

  return (
    <div className={styles.container}>
      <Avatar
        alt={`${user.firstName} ${user.lastName}`}
        initials={initials}
        size="lg"
      />
      <div>
        <Typography variant="Title/smLowCase">
          <h3 className={styles.fullName}>
            {user.firstName} {user.lastName}
          </h3>
        </Typography>
        <div className={styles.membershipInfo}>
          <Typography variant="Body/Supporting text (caption)/smBold">
            <span>
              {intl.formatMessage({
                id: "overview.membershipNumber.label",
                defaultMessage: "Membership ID:",
              })}
            </span>
          </Typography>
          {user.membership?.membershipNumber ? (
            <CopyMembershipIdButton
              membershipNumber={user.membership.membershipNumber}
            />
          ) : (
            <Typography variant="Body/Supporting text (caption)/smBold">
              <span className={styles.noMembership}>
                {intl.formatMessage({
                  id: "common.NA",
                  defaultMessage: "N/A",
                })}
              </span>
            </Typography>
          )}
        </div>
      </div>
    </div>
  )
}