import { Circle, CircleMinus, Moon } from "lucide-react";

export function OnlineStatus({
    status,
    ...props
}: React.ComponentProps<"div"> & {
    status: "online" | "dnd" | "idle" | "offline";
}) {
    return (
        <div className="relative">
            <div {...props}></div>
            <div className="absolute bottom-0 right-0 bg-accent rounded-full p-0.5 size-1/2">
                {status === "online" && <Circle className="size-full stroke-emerald-400 fill-emerald-400" />}
                {status === "dnd" && <CircleMinus className="size-full stroke-red-400 stroke-3" />}
                {status === "idle" && <Moon className="size-full stroke-amber-400 fill-amber-400" />}
                {status === "offline" && <Circle className="size-full stroke-gray-400 stroke-3" />}
            </div>
        </div>
    );
}