import React, { useEffect, useState } from "react";
import { getInitials } from "./functions/getInitials";
import { getAvatarColor } from "./functions/getAvatarColor";

interface AvatarProps {
  name: string; // Name can be a full name or initials
  size?: number;
  textColor?: string;
  color?: string; // Optional color prop for future use
}

const CustomAvatar: React.FC<AvatarProps> = ({
  name,
  size = 100,
  textColor = "#ffffff",
  color, // Optional color prop for future use
}) => {
  const [imageSrc, setImageSrc] = useState<string | null>(null);

  useEffect(() => {
    const canvas = document.createElement("canvas"); // Create an offscreen canvas
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext("2d");
    if (ctx) {
      const initials = getInitials(name); // Convert name to initials if needed

      // Draw background
      ctx.fillStyle = color || "#323232"; // Use color prop or generate color based on index
      ctx.fillRect(0, 0, size, size);

      // Draw initials
      ctx.fillStyle = textColor;
      ctx.font = `bold ${size / 2}px Arial`;
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText(initials, size / 2, size / 2);

      // Generate image source
      const dataURL = canvas.toDataURL("image/png");
      setImageSrc(dataURL);
    }
  }, [name, size, textColor]);

  if (!imageSrc) {
    return null; // Return null while the image is being generated
  }

  return (
    <img
      className="user-image"
      src={imageSrc}
      alt="User Avatar"
      style={{ width: "100%", height: "100%" }}
    />
  );
};

export default CustomAvatar;