import { useState } from "react";
import { senderAvatar } from "../utils/senderAvatar";

export default function SenderAvatar({ email, className = "" }) {
  const { initials, color, imageUrl, brandUrl, isBrand } = senderAvatar(email);
  const [broken, setBroken] = useState(false);
  const src = imageUrl || brandUrl;

  if (src && !broken) {
    return (
      <span
        className={`sender-avatar${isBrand ? " sender-avatar-brand" : ""}${className ? ` ${className}` : ""}`}
      >
        <img src={src} alt="" aria-hidden="true" onError={() => setBroken(true)} />
      </span>
    );
  }

  return (
    <span
      className={`sender-avatar${className ? ` ${className}` : ""}`}
      style={{ backgroundColor: color }}
      aria-hidden="true"
    >
      {initials}
    </span>
  );
}