"use client";

import { useId } from "react";
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";
  const skeletonId = useId();
  const skeletonKeys = Array.from(
    { length: skeletons },
    (_, index) => `${skeletonId}-${index}`,
  );

  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">
          {skeletonKeys.map((skeletonKey) => (
            <div key={skeletonKey} 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>
  );
}