1import { cn } from "@/utils/cn";
2
3interface AvatarProps {
4  src?: string;
5  alt?: string;
6  isRounded?: boolean;
7  status?: "online" | "offline" | "none";
8  className?: string;
9  location?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
10  size?: "xs" | "sm" | "md" | "lg";
11}
12
13const Avatar = ({
14  src = "https://api.dicebear.com/9.x/big-ears-neutral/svg",
15  alt,
16  isRounded = true,
17  status = "none",
18  className,
19  location = "bottom-right",
20  size,
21}: AvatarProps) => {
22  const avatarSize =
23    size === "xs"
24      ? "h-8 w-8"
25      : size === "sm"
26        ? "h-10 w-10"
27        : size === "md"
28          ? "h-12 w-12"
29          : size === "lg"
30            ? "h-16 w-16"
31            : "h-12 w-12"; 
32
33  const statusIconSize =
34    size === "xs"
35      ? "h-2 w-2"
36      : size === "sm"
37        ? "h-3 w-3"
38        : size === "md"
39          ? "h-4 w-4"
40          : size === "lg"
41            ? "h-5 w-5"
42            : "h-5 w-5";
43
44  // Calculate padding to center the inner circle
45  const paddingSize =
46    statusIconSize === "h-2 w-2"
47      ? "p-[1.6px]"
48      : statusIconSize === "h-3 w-3"
49        ? "p-[2.4px]"
50        : statusIconSize === "h-4 w-4"
51          ? "p-1"
52          : statusIconSize === "h-5 w-5"
53            ? "p-[3.2px]"
54            : "p-2";
55
56  const statusPosition =
57    location === "top-left"
58      ? "-left-0.5 -top-0.5"
59      : location === "top-right"
60        ? "-right-0.5 -top-0.5"
61        : location === "bottom-left"
62          ? "-left-0.5 -bottom-0.5"
63          : "-right-0.5 -bottom-0.5";
64
65  return (
66    <span className={cn("relative inline-block", avatarSize)}>
67      <img
68        className={cn(
69          avatarSize,
70          isRounded ? "rounded-full" : "rounded-lg",
71          "object-cover"
72        )}
73        src={src}
74        alt={alt}
75      />
76
77      {status !== "none" && (
78        <div
79          className={cn(
80            "absolute flex items-center justify-center rounded-full bg-white",
81            statusIconSize,
82            statusPosition,
83            paddingSize
84          )}
85        >
86          <div
87            className={cn(
88              status === "online" ? "bg-green-600" : "bg-red-600",
89              className,
90              "h-full w-full rounded-full"
91            )}
92          ></div>
93        </div>
94      )}
95    </span>
96  );
97};
98
99export default Avatar;