import { t } from "@/shared/i18n"
import { Loader2 } from "lucide-react"

export function SyncProgress({ progress }: { progress: string | null }) {
	if (!progress) return null

	if (progress === "fetching") {
		return (
			<div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
				<Loader2 className="h-4 w-4 animate-spin" />
				{t("settings.syncFetching")}
			</div>
		)
	}

	if (progress.startsWith("saving:")) {
		const [, current, total] = progress.split(":")
		return (
			<div className="mt-4 space-y-1.5">
				<div className="flex items-center gap-2 text-sm text-muted-foreground">
					<Loader2 className="h-4 w-4 animate-spin" />
					{t("settings.syncSaving", { current, total })}
				</div>
				<div className="h-2 overflow-hidden rounded-full bg-muted">
					<div
						className="h-full rounded-full bg-primary transition-all"
						style={{ width: `${(Number(current) / Number(total)) * 100}%` }}
					/>
				</div>
			</div>
		)
	}

	if (progress === "enriching:ids") {
		return (
			<div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
				<Loader2 className="h-4 w-4 animate-spin" />
				{t("settings.syncEnrichingIds")}
			</div>
		)
	}

	if (progress === "enriching:metadata") {
		return (
			<div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
				<Loader2 className="h-4 w-4 animate-spin" />
				{t("settings.syncEnrichingMetadata")}
			</div>
		)
	}

	return null
}