import { useAuth } from "@/store/auth";
import { User } from "lucide-react";
import { useMemo, type FC } from "react";

export interface AvatarProps {
  iconSize?: number;
  className?: string;
  avatarId?: string;
}

const Avatar: FC<AvatarProps> = ({ iconSize = 32, className, avatarId }) => {
  const profile = useAuth((state) => state.profile);

  const avatar = useMemo(
    () => (avatarId !== undefined ? avatarId : profile?.profile_picture),
    [avatarId, profile?.profile_picture],
  );

  return (
    <div
      className={`overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500 flex items-center justify-center ${className}`}
    >
      {avatar ? (
        <img
          src={`/api/v1/avatar/${avatar?.toString()}`}
          className="w-full h-full flex-1 object-cover"
          alt="profile"
        />
      ) : (
        <User size={iconSize} />
      )}
    </div>
  );
};

export default Avatar;