import React from 'react';

interface ProfileLogoProps {
  imageUrl?: string;
  name: string;
  email: string;
  size?: number;
  showLabel?: boolean;
  onClick?: () => void;
}

const ProfileLogo: React.FC<ProfileLogoProps> = ({ imageUrl, name, email, size = 42, showLabel = true, onClick }) => {
  const getInitials = (name: string) => {
    const words = name.split(' ');
    if (words.length === 1) {
      return words[0].charAt(0).toUpperCase();
    }
    return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
  };

  const initials = getInitials(name);

  return (
    <button className="flex items-center gap-2 group" onClick={onClick}>
      {imageUrl ? (
        <img
          src={imageUrl}
          alt={`Profile picture of ${name}`}
          style={{
            width: `${size}px`,
            height: `${size}px`,
          }}
          className="rounded-full object-cover border border-gray-200"
        />
      ) : (
        <div
          style={{
            width: `${size}px`,
            height: `${size}px`,
            fontSize: `${size / 2.3}px`,
          }}
          className="relative rounded-full bg-gradient-to-br flex items-center justify-center dark:text-gray-300 text-gray-600 font-medium border-2 border-gray-200 dark:border-gray-800 shadow-md shadow-black/5 dark:shadow-black/30 hover:shadow-none hover:bg-gray-200/20 dark:hover:bg-gray-800/20 transition-all duration-100"
          aria-label={`Profile: ${name}`}
        >
          {initials}
          {showLabel && (
            <span
              className="absolute z-10 right-full mr-2 top-1/2 -translate-y-1/2 bg-black text-white px-4 py-1.5 rounded text-sm opacity-0 delay-0 group-hover:opacity-100 transition-opacity group-hover:delay-200 whitespace-nowrap shadow-xl pointer-events-none"
          >
            <div className="flex flex-col">
                <span>{name}</span>
                <span className="text-[0.65rem] text-gray-400">{email}</span>
              </div>
            </span>
          )}
        </div>
      )}
    </button>
  );
};

export default ProfileLogo;