"use client";

import { TopProgressBar } from "./animations/TopProgressBar";

interface SectionLoadingProps {
  message: string;
  dark?: boolean;
  skeletons?: number;
}

export function SectionLoading({
  message,
  dark = false,
  skeletons = 2,
}: Readonly<SectionLoadingProps>) {
  const sectionClass = dark ? "ds-section ds-section-dark" : "ds-section";

  return (
    <section className={sectionClass}>
      <TopProgressBar />
      <div className="ds-section-shell">
        <div className="ds-loading">{message}</div>
        <div className="ds-grid-2 mt-sp-6" aria-hidden="true">
          {Array.from({ length: skeletons }).map((_, index) => (
            <div key={`skeleton-${index}`} className="ds-card ds-skeleton-card">
              <div className="ds-skeleton ds-skeleton-kicker" />
              <div className="ds-skeleton ds-skeleton-title" />
              <div className="ds-skeleton ds-skeleton-line" />
              <div className="ds-skeleton ds-skeleton-line" />
              <div className="ds-skeleton ds-skeleton-line ds-skeleton-line-short" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}