import { Circle, MinusCircle, Moon } from "lucide-react";
import { cn } from "~/lib/utils"; // Assuming you have a cn utility

// Define status type for better type safety if used elsewhere
export type UserStatusType = "online" | "dnd" | "idle" | "offline";

interface OnlineStatusProps extends React.ComponentProps<"div"> {
    status: UserStatusType;
}

export function OnlineStatus({ status, className, ...rest }: OnlineStatusProps) {
    const statusTitle = status.charAt(0).toUpperCase() + status.slice(1);

    let statusIndicatorIcon: React.ReactNode = null;

    switch (status) {
        case "online":
            statusIndicatorIcon = <Circle className="size-full fill-emerald-500 stroke-none" />;
            break;
        case "dnd":
            statusIndicatorIcon = (
                <MinusCircle className="size-full fill-red-500 stroke-background" strokeWidth={2.5} />
            );
            break;
        case "idle":
            statusIndicatorIcon = <Moon className="size-full fill-amber-400 stroke-amber-400" />;
            break;
        case "offline":
            statusIndicatorIcon = <Circle className="size-full fill-transparent stroke-gray-500 stroke-[4px]" />;
            break;
    }

    return (
        <div className="relative inline-block align-middle">
            <div className={className} {...rest} />
            <div
                title={statusTitle}
                className={cn(
                    "absolute bottom-0 right-0 flex items-center justify-center",
                    "rounded-full bg-background",
                    "size-1/2 p-0.5",
                )}
            >
                {statusIndicatorIcon}
            </div>
        </div>
    );
}