"use client";

import { Loader2 } from "lucide-react";
import { PRIMARY_COLOR } from "@/lib/common";

export default function GlobalLoader() {
  return (
    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-slate-950/60 backdrop-blur-sm">
      <div className="flex w-full max-w-sm flex-col items-center gap-3 rounded-lg border border-white/80 bg-white/90 p-6 text-center shadow-2xl">
        <div 
          className="flex h-14 w-14 items-center justify-center rounded-lg border"
          style={{
            borderColor: `${PRIMARY_COLOR}4D`,
            backgroundColor: `${PRIMARY_COLOR}1A`,
          }}
        >
          <Loader2 
            className="h-6 w-6 animate-spin" 
            style={{ color: "#1f7a3d" }}
          />
        </div>
        <p className="text-lg font-semibold text-slate-800">Syncing data</p>
        <p className="text-sm text-slate-500">
          Please wait while we load the latest information from the server.
        </p>
      </div>
    </div>
  );
}