import { authClient } from '#/lib/auth-client'

import styles from './header-user.module.scss'

const BetterAuthHeader = () => {
  const { data: session, isPending } = authClient.useSession()

  if (isPending) {
    return <div className={`${styles.avatar} ${styles.avatarPulse}`} />
  }

  if (session?.user) {
    return (
      <div className={styles.session}>
        {session.user.image ? (
          <img src={session.user.image} alt="" className={styles.avatar} />
        ) : (
          <div className={`${styles.avatar} ${styles.avatarInitial}`}>
            <span>{session.user.name.charAt(0).toUpperCase() || 'U'}</span>
          </div>
        )}
        <button
          onClick={() => {
            void authClient.signOut()
          }}
          className={styles.signOut}
        >
          Sign out
        </button>
      </div>
    )
  }

  return null
}

export default BetterAuthHeader