export default function AllocationsLoading() {
  return (
    <div className="flex flex-col h-full gap-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="h-7 w-36 shimmer-skeleton rounded" />
        <div className="h-9 w-32 shimmer-skeleton rounded-lg" />
      </div>

      {/* Filter bar */}
      <div className="flex gap-2">
        <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
        <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
        <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
      </div>

      {/* Table */}
      <div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
        {/* Header */}
        <div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
          <div className="h-3 w-4 shimmer-skeleton rounded" />
          <div className="h-3 w-28 shimmer-skeleton rounded" />
          <div className="h-3 flex-1 shimmer-skeleton rounded" />
          <div className="h-3 w-20 shimmer-skeleton rounded" />
          <div className="h-3 w-20 shimmer-skeleton rounded" />
          <div className="h-3 w-16 shimmer-skeleton rounded" />
          <div className="h-3 w-20 shimmer-skeleton rounded" />
          <div className="h-3 w-16 shimmer-skeleton rounded" />
        </div>
        {/* Rows */}
        {[...Array(10)].map((_, i) => (
          <div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
            <div className="h-4 w-4 shimmer-skeleton rounded" />
            <div className="h-3 w-28 shimmer-skeleton rounded" />
            <div className="h-3 flex-1 shimmer-skeleton rounded" />
            <div className="h-3 w-20 shimmer-skeleton rounded" />
            <div className="h-3 w-20 shimmer-skeleton rounded" />
            <div className="h-3 w-10 shimmer-skeleton rounded" />
            <div className="h-3 w-16 shimmer-skeleton rounded" />
            <div className="h-5 w-20 shimmer-skeleton rounded-full" />
          </div>
        ))}
      </div>
    </div>
  );
}
