import { useAppStore } from "../stores/app-store";

const statusConfig = {
	connected: {
		text: "\u5df2\u8fde\u63a5",
		dotClass: "bg-success shadow-[0_0_6px_rgba(52,211,153,0.5)]",
		borderClass: "border-success/15",
	},
	disconnected: {
		text: "\u5df2\u65ad\u5f00",
		dotClass: "bg-danger shadow-[0_0_6px_rgba(244,63,94,0.4)]",
		borderClass: "border-edge",
	},
	connecting: {
		text: "\u8fde\u63a5\u4e2d\u2026",
		dotClass: "bg-accent animate-pulse-dot",
		borderClass: "border-edge",
	},
} as const;

export function StatusBadge() {
	const status = useAppStore((s) => s.connectionStatus);
	const { text, dotClass, borderClass } = statusConfig[status];

	return (
		<div
			className={`flex items-center gap-[7px] rounded-full border bg-surface px-3 py-[5px] font-medium text-fg-dim text-xs transition-all ${borderClass}`}
		>
			<span
				className={`size-[7px] shrink-0 rounded-full transition-all duration-300 ${dotClass}`}
			/>
			<span>{text}</span>
		</div>
	);
}