import React from 'react';
import { Avatar, Tooltip } from '../ui';

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 button = (
    <button
      type="button"
      onClick={onClick}
      aria-label={`Account: ${name}`}
      className="group inline-flex animate-fade-in rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-app-bg"
    >
      <Avatar
        name={name}
        imageUrl={imageUrl}
        size={size}
        className="transition-transform duration-100 group-hover:scale-[1.04]"
      />
    </button>
  );

  if (!showLabel) return button;

  return (
    <Tooltip
      side="left"
      label={(
        <span className="flex flex-col gap-0.5">
          <span>{name}</span>
          <span className="text-[0.7rem] opacity-70">{email}</span>
        </span>
      )}
    >
      {button}
    </Tooltip>
  );
};

export default ProfileLogo;