import { classNames } from '../../lib/utils';
import { displayNameFromEmail } from '../../lib/utils/format';

/** Props for {@link NavUserChip}. */
interface NavUserChipProps {
  email?: string;
  /** The controls that sit after the name: theme switch, log out. */
  children?: React.ReactNode;
  className?: string;
}

/**
 * The account chip the sidebar and the mobile menu share: a gradient avatar
 * with the email's first letter, the derived name and the email, then
 * whatever controls the caller puts beside them.
 *
 * @param {NavUserChipProps} props - Component props
 * @returns {React.ReactElement} The chip
 */
function NavUserChip({
  email,
  children,
  className,
}: NavUserChipProps): React.ReactElement {
  const name = displayNameFromEmail(email);
  const initial = (email?.charAt(0) ?? '?').toUpperCase();

  return (
    <div className={classNames('flex items-center gap-2.5', className)}>
      <span className="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-[linear-gradient(135deg,#c026d3,#ec4899)] text-[14px] font-bold text-white">
        {initial}
      </span>
      <span className="flex min-w-0 flex-1 flex-col" title={email}>
        {name && (
          <span className="truncate text-[13.5px] font-bold leading-tight text-foreground">
            {name}
          </span>
        )}
        <span className="truncate text-[11.5px] leading-tight text-nav-hint">
          {email ?? ''}
        </span>
      </span>
      {children}
    </div>
  );
}

export default NavUserChip;