export default function QuestionsLoading() {
  return (
    <div className="space-y-6">
      <div className="h-9 w-48 bg-[var(--secondary)] rounded animate-pulse" />

      <div className="flex flex-wrap gap-4 p-4 rounded-lg bg-[var(--secondary)]">
        <div className="space-y-1">
          <div className="h-4 w-16 bg-[var(--muted)] rounded animate-pulse" />
          <div className="flex gap-2">
            {[1, 2, 3, 4].map((i) => (
              <div
                key={i}
                className="h-8 w-16 bg-[var(--muted)] rounded animate-pulse"
              />
            ))}
          </div>
        </div>
      </div>

      <div className="h-4 w-40 bg-[var(--secondary)] rounded animate-pulse" />

      <div className="grid gap-4">
        {[1, 2, 3, 4, 5].map((i) => (
          <div
            key={i}
            className="p-4 rounded-lg bg-[var(--card)] border border-[var(--border)]"
          >
            <div className="h-6 w-64 bg-[var(--secondary)] rounded animate-pulse mb-2" />
            <div className="h-4 w-full bg-[var(--secondary)] rounded animate-pulse mb-2" />
            <div className="h-4 w-3/4 bg-[var(--secondary)] rounded animate-pulse" />
          </div>
        ))}
      </div>
    </div>
  );
}
