import { Skeleton, SkeletonLine } from '@/components/Skeleton'

/**
 * Bildet die spätere Struktur nach: gleiche Höhen, gleiche Spaltenbreiten.
 * Damit springt nichts, wenn die Daten kommen.
 */
export default function Loading() {
  return (
    <main className="mx-auto max-w-5xl px-6 py-10">
      <Skeleton className="h-[1.5rem]" width="12rem" />
      <div className="mt-4 flex gap-3">
        {['4rem', '5rem', '5rem', '6rem'].map((width, index) => (
          <Skeleton key={index} className="h-[0.9rem]" width={width} />
        ))}
      </div>
      <div className="mt-6 border-t border-line">
        {Array.from({ length: 8 }, (_, index) => (
          <div key={index} className="border-b border-line py-3 pl-3">
            <SkeletonLine width={`${55 + ((index * 7) % 35)}%`} />
          </div>
        ))}
      </div>
    </main>
  )
}