import { cn } from "@/lib/utils";

export const getAppHeaderSurfaceClasses = (isMobile: boolean) =>
	cn(
		"mb-6 flex min-h-14 items-center justify-between gap-3 bg-background/95 py-3 shadow-[inset_0_-1px_0_0_var(--color-border)]",
		isMobile ? "px-4" : "px-6",
	);

export const getAppSectionSurfaceClasses = (isMobile: boolean) =>
	cn("rounded-[10px] bg-card py-4 shadow", isMobile ? "px-4" : "px-5");

export const APP_ACTION_BAR_CLASSES =
	"rounded-[10px] bg-secondary px-3 py-3 shadow-sm";

export const getAppNavSurfaceClasses = (isMobile: boolean) =>
	cn(
		"mx-auto max-w-3xl items-center justify-between rounded-[10px] bg-card/95 px-3 py-2 shadow-lg",
		isMobile ? "fixed inset-x-4 bottom-4 flex" : "hidden",
	);

const CONNECTION_BADGE_BASE_CLASSES =
	"gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium shadow-sm";

export const getConnectionBadgeClasses = (isOnline: boolean) =>
	cn(
		CONNECTION_BADGE_BASE_CLASSES,
		isOnline ? "bg-[#ebf5ff] text-[#0068d6]" : "bg-muted text-muted-foreground",
	);
