import { isAppPaused } from '@/api/client';

const StatusBar = () => {
	// Trial ended (an `app-upgrade` CTA is present) → Flavio is paused, so the
	// status bar must not claim it's still working.
	const isPaused = isAppPaused();

	return (
		<div className="sticky bottom-0 z-40 w-full bg-neutral-50 border-t border-border px-6 py-2 flex items-center justify-between">
			<div className="flex items-center gap-2.5">
				{isPaused ? (
					<>
						<span className="inline-flex rounded-full h-2 w-2 bg-neutral-400" />
						<span className="label-medium text-muted-foreground">
							Flavio is paused. Upgrade to resume.
						</span>
					</>
				) : (
					<>
						<span className="relative flex h-2 w-2">
							<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
							<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
						</span>
						<span className="label-medium text-muted-foreground">
							Flavio is working on your website.
						</span>
					</>
				)}
			</div>
		</div>
	);
};

export default StatusBar;