export default function GeneratorSkeleton() {
  return (
    <div className="glass-card rounded-2xl overflow-hidden animate-pulse">
      {/* Header skeleton */}
      <div className="p-4 border-b border-border/50 flex items-center gap-3">
        <div className="w-10 h-10 rounded-xl bg-accent" />
        <div className="space-y-2">
          <div className="h-4 w-24 bg-accent rounded" />
          <div className="h-3 w-32 bg-accent rounded" />
        </div>
      </div>

      {/* Tabs skeleton */}
      <div className="flex border-b border-border/50">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="flex-1 h-10 bg-accent/30" />
        ))}
      </div>

      {/* Content skeleton */}
      <div className="p-4 space-y-3">
        <div className="h-4 bg-accent rounded w-full" />
        <div className="h-4 bg-accent rounded w-5/6" />
        <div className="h-4 bg-accent rounded w-4/6" />
        <div className="h-4 bg-accent rounded w-full" />
        <div className="h-4 bg-accent rounded w-3/4" />
        <div className="h-4 bg-accent rounded w-5/6" />
        <div className="h-4 bg-accent rounded w-2/3" />
      </div>

      {/* Loading indicator */}
      <div className="p-4 pt-0 flex items-center justify-center gap-2 text-muted-foreground text-sm">
        <div className="w-1.5 h-1.5 rounded-full bg-primary animate-bounce" style={{ animationDelay: "0ms" }} />
        <div className="w-1.5 h-1.5 rounded-full bg-primary animate-bounce" style={{ animationDelay: "150ms" }} />
        <div className="w-1.5 h-1.5 rounded-full bg-primary animate-bounce" style={{ animationDelay: "300ms" }} />
        <span className="ml-1">AI sedang memproses...</span>
      </div>
    </div>
  );
}
