interface LoadingShimmerProps {
  className?: string;
  lines?: number;
  variant?: "card" | "text" | "avatar";
}

function Shimmer({ className = "" }: { className?: string }) {
  return (
    <div className={`bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse ${className}`} />
  );
}

export function LoadingShimmer({ className = "", lines = 3, variant = "text" }: LoadingShimmerProps) {
  if (variant === "avatar") {
    return (
      <div className={`flex items-center gap-3 ${className}`}>
        <Shimmer className="w-10 h-10 rounded-full flex-shrink-0" />
        <div className="flex-1 space-y-2">
          <Shimmer className="h-4 w-3/4" />
          <Shimmer className="h-3 w-1/2" />
        </div>
      </div>
    );
  }

  if (variant === "card") {
    return (
      <div className={`bg-white dark:bg-gray-800 rounded-2xl p-4 space-y-3 ${className}`}>
        <Shimmer className="h-5 w-1/3" />
        <Shimmer className="h-4 w-full" />
        <Shimmer className="h-4 w-5/6" />
      </div>
    );
  }

  return (
    <div className={`space-y-2 ${className}`}>
      {Array.from({ length: lines }).map((_, i) => (
        <Shimmer key={i} className={`h-4 ${i === lines - 1 ? "w-2/3" : "w-full"}`} />
      ))}
    </div>
  );
}
