import React from "react";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface LoadingStateProps {
  message?: string;
  variant?: "spinner" | "skeleton";
  className?: string;
}

export const LoadingState: React.FC<LoadingStateProps> = ({
  message = "Memuat data...",
  variant = "spinner",
  className,
}) => {
  if (variant === "skeleton") {
    return (
      <div className={cn("w-full space-y-4 animate-pulse", className)}>
        <div className="h-8 bg-slate-200 rounded-md w-1/4" />
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="h-28 bg-slate-100 rounded-lg border border-brand-border" />
          ))}
        </div>
        <div className="h-64 bg-slate-100 rounded-lg border border-brand-border" />
      </div>
    );
  }

  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center p-12 text-center",
        className
      )}
    >
      <Loader2 className="w-8 h-8 text-brand-blue animate-spin mb-3" />
      <p className="text-sm font-medium text-brand-secondary">{message}</p>
    </div>
  );
};