status-monitor/ui/src/components/AgentCard.tsx

import type { UptimeMessage } from "@/services/types";
import { Progressbar } from "@/components/Progressbar";
import { formatRelativeTime, isAgentOnline } from "@/services/utils";

type AgentOverviewCardProps = {
    count: number;
    title: string;
    icon: {
        ref: React.ReactNode;
        color: string;
        bgColor: string;
    };
};

export function AgentOverviewCard({
    props,
}: {
    props: AgentOverviewCardProps;
}) {
    return (
        <div className="bg-[#111111] border border-[#262626] rounded-lg p-6">
            <div className="flex items-center justify-between">
                <div>
                    <p className="text-sm text-gray-400 uppercase tracking-wider">
                        {props.title}
                    </p>
                    <p className="text-2xl font-bold text-white">
                        {props.count}
                    </p>
                </div>
                <div
                    className="w-12 h-12 rounded-lg flex items-center justify-center"
                    style={{
                        color: props.icon.color,
                        backgroundColor: props.icon.bgColor,
                    }}
                >
                    {props.icon.ref}
                </div>
            </div>
        </div>
    );
}

type AgentCardProps = {
    data: UptimeMessage;
    onClick: () => void;
};

export function AgentCard({ data, onClick }: AgentCardProps) {
    const status = isAgentOnline(data)
        ? {
              name: "online",
              color: "bg-green-500",
              textColor: "text-green-400",
              borderColor: "border-green-500/20",
              bgColor: "bg-green-500/10",
          }
        : {
              name: "offline",
              color: "bg-red-500",
              textColor: "text-red-400",
              borderColor: "border-red-500/20",
              bgColor: "bg-red-500/10",
          };

    return (
        <div
            onClick={() => onClick()}
            className="bg-[#111111] border border-[#262626] rounded-lg p-6 hover:bg-[#151515] transition-all cursor-pointer group"
        >
            <div className="flex items-center justify-between space-x-10">
                <div className="flex items-center space-x-3">
                    <div
                        className={`px-2 py-1 rounded-md text-xs font-medium ${status.bgColor} ${status.textColor} border ${status.borderColor}`}
                    >
                        {status.name.toUpperCase()}
                    </div>
                    <h3 className="text-sm md:text-md lg:text-lg font-semibold text-white transition-colors">
                        {data.agent}
                    </h3>
                </div>

                <div className="flex items-center space-x-3 flex-1 justify-end">
                    <div className="flex flex-col max-w-lg gap-y-2">
                        <Progressbar
                            color={status.color}
                            percentage={data.uptime}
                        />
                        <div className="flex justify-between items-center text-xs">
                            <span>{formatRelativeTime(data.last_seen)}</span>
                            <span>{data.uptime.toFixed(2)}%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}