"use client"

import {ProfileNameProps} from "../../props"
import styles from "./styles.module.sass"

export const ProfileName = ({name, onClick, wrapperClass = "", contentClass}: ProfileNameProps) => {
  const nameArray = name?.split(" ")

  const letters =
    nameArray?.length === 1
      ? nameArray[0]?.slice(0, 2)?.toUpperCase()
      : nameArray?.map(name => name?.charAt(0)?.toUpperCase())?.join("")

  return (
    <section className={`flex-center ${wrapperClass} ${styles.profile_container}`} onClick={onClick}>
      <label className={`flex-center ${contentClass}`}>{letters}</label>
    </section>
  )
}