export default function TimelineLoading() {
  return (
    <div className="flex flex-col h-full gap-0">
      {/* Toolbar */}
      <div className="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
        <div className="h-8 w-24 shimmer-skeleton rounded-lg" />
        <div className="h-8 w-24 shimmer-skeleton rounded-lg" />
        <div className="flex-1" />
        <div className="h-8 w-8 shimmer-skeleton rounded-lg" />
        <div className="h-8 w-8 shimmer-skeleton rounded-lg" />
        <div className="h-8 w-20 shimmer-skeleton rounded-lg" />
      </div>

      {/* Date header */}
      <div className="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
        <div className="w-48 flex-shrink-0 px-4 py-2">
          <div className="h-3 w-20 shimmer-skeleton rounded" />
        </div>
        <div className="flex-1 flex gap-px py-2 px-2">
          {[...Array(20)].map((_, i) => (
            <div key={i} className="flex-1 h-3 shimmer-skeleton rounded" />
          ))}
        </div>
      </div>

      {/* Resource rows */}
      {[...Array(8)].map((_, i) => (
        <div key={i} className="flex border-b border-gray-100 dark:border-gray-800 py-3 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
          {/* Resource name cell */}
          <div className="w-48 flex-shrink-0 px-4 flex flex-col gap-1.5">
            <div className="h-3 w-24 shimmer-skeleton rounded" />
            <div className="h-2 w-12 shimmer-skeleton rounded" />
          </div>
          {/* Allocation bars */}
          <div className="flex-1 relative px-2 flex items-center gap-1">
            {i % 3 === 0 && (
              <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "35%", marginLeft: "10%" }} />
            )}
            {i % 3 === 1 && (
              <>
                <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "20%", marginLeft: "5%" }} />
                <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "30%", marginLeft: "2%" }} />
              </>
            )}
            {i % 3 === 2 && (
              <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "45%", marginLeft: "20%" }} />
            )}
          </div>
        </div>
      ))}
    </div>
  );
}