import useStatus from "@/twui/components/hooks/useStatus";
import Img from "@/twui/components/layout/Img";
import { twMerge } from "tailwind-merge";

type Props = {
    image_url?: string | null;
    image_size?: number;
    title?: string;
};

export default function Avatar({ image_url, image_size = 35, title }: Props) {
    const { loading, setLoading } = useStatus();

    if (!image_url) {
        return (
            <div
                className={twMerge(
                    `bg-slate-100 dark:bg-white/10 rounded-full`,
                    ``,
                )}
                style={{
                    width: `${image_size}px`,
                    height: `${image_size}px`,
                }}
            />
        );
    }

    return (
        <Img circle size={image_size} src={image_url} alt={title || `Avatar`} />
    );
}
