import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import { useUsageStore } from '../../stores/usageStore';
const SIZE = 22;
const STROKE = 2.5;
const RADIUS = (SIZE - STROKE) / 2;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
function getColor(percent) {
    if (percent >= 90)
        return '#ef4444';
    if (percent >= 70)
        return '#f59e0b';
    return '#3b82f6';
}
export const UsageRing = memo(function UsageRing({ usage, provider, }) {
    const openModal = useUsageStore((s) => s.openModal);
    const percent = usage.primaryWindow?.usedPercent ?? 0;
    const dashOffset = CIRCUMFERENCE - (percent / 100) * CIRCUMFERENCE;
    const color = getColor(percent);
    return (_jsxs("button", { type: "button", onClick: () => openModal(provider), className: "relative flex items-center hover:opacity-80 transition-opacity cursor-pointer", title: `Usage: ${Math.round(percent)}% (5h window) — Click for details`, children: [_jsxs("svg", { width: SIZE, height: SIZE, className: "-rotate-90", children: [_jsx("circle", { cx: SIZE / 2, cy: SIZE / 2, r: RADIUS, fill: "none", stroke: "hsl(var(--muted))", strokeWidth: STROKE }), _jsx("circle", { cx: SIZE / 2, cy: SIZE / 2, r: RADIUS, fill: "none", stroke: color, strokeWidth: STROKE, strokeDasharray: CIRCUMFERENCE, strokeDashoffset: dashOffset, strokeLinecap: "round", className: "transition-all duration-500" })] }), _jsx("span", { className: "absolute inset-0 flex items-center justify-center rotate-0 font-medium text-muted-foreground", style: { fontSize: 7 }, children: "5h" })] }));
});
//# sourceMappingURL=UsageRing.js.map