import Image from "next/image";
import clsx from "clsx";

import { OnlineIndicator } from "..";

import styles from "./UserAvatar.module.scss";

export interface UserAvatarProps extends React.ComponentProps<"div"> {
  src: string;
  alt: string;
  size?: "s" | "sm" | "md" | "lg";
  isOnline?: boolean;
  isOnlineIndicator?: boolean;
}

const sizes = {
  s: 32,
  sm: 36,
  md: 48,
  lg: 48,
};

export default function UserAvatar({
  src,
  alt,
  size = "md",
  isOnline,
  isOnlineIndicator = true,
  className,
}: UserAvatarProps) {
  return (
    <div className={clsx(styles.avatarContainer, className)}>
      <Image
        src={src}
        alt={alt}
        className={styles.avatar}
        width={sizes[size]}
        height={sizes[size]}
        style={{
          width: sizes[size],
          height: sizes[size],
        }}
      />
      {isOnlineIndicator && isOnline !== undefined && (
        <OnlineIndicator
          isOnline={isOnline}
          className={styles.onlineIndicator}
        />
      )}
    </div>
  );
}
