import { Bone, TableSkeleton } from '@/components/satellite/skeleton';
import { Container } from '@/components/ui/section';

export default function Loading() {
  return (
    <Container wide>
      <div className="pb-6 pt-8 md:pb-8 md:pt-12" role="status" aria-label="Loading satellites">
        <Bone className="h-3 w-40" />
        <Bone className="mt-3 h-10 w-2/3 max-w-lg md:h-14" />
        <Bone className="mt-6 h-11 w-full max-w-md" />
      </div>
      <Bone className="h-40 w-full rounded-lg" />
      <div className="mt-5 flex flex-wrap gap-1.5">
        {Array.from({ length: 10 }).map((_, i) => (
          <Bone key={i} className="h-9 w-24" />
        ))}
      </div>
      <div className="py-6">
        <TableSkeleton rows={14} />
      </div>
    </Container>
  );
}