import styles from "@/features/host-org/host-org.module.css";

export function HostOrgPerson({ avatar, displayUserId, fallbackId, username }) {
    const name = username || "-";
    const meta = displayUserId || fallbackId || "-";

    return (
        <div className={styles.sellerIdentity}>
            {avatar ? (
                <img alt="" className={styles.sellerAvatar} src={avatar} />
            ) : (
                <span className={styles.sellerAvatar}>
                    {String(name || meta)
                        .slice(0, 1)
                        .toUpperCase()}
                </span>
            )}
            <span className={styles.sellerText}>
                <span className={styles.sellerName}>{name}</span>
                <span className={styles.sellerMeta}>{meta}</span>
            </span>
        </div>
    );
}

export function HostOrgEntity({ id, name, prefix = "" }) {
    if (!id && !name) {
        return "-";
    }
    return (
        <span className={styles.sellerText}>
            <span className={styles.sellerName}>{name || "-"}</span>
            <span className={styles.sellerMeta}>
                {prefix}
                {id || "-"}
            </span>
        </span>
    );
}

export function hostOrgRegionName(item, regionOptions = []) {
    if (item.regionName) {
        return item.regionName;
    }
    const option = regionOptions.find((region) => String(region.value) === String(item.regionId));
    return option?.name || item.regionId || "-";
}