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

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">
        <Skeleton className="h-[2.4rem]" width="24rem" />
      </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={`${45 + ((index * 11) % 40)}%`} />
          </div>
        ))}
      </div>
    </main>
  )
}