import styles from "./LoadingState.module.css";

interface LoadingStateProps {
  message?: string;
  /** Jumlah skeleton card yang ditampilkan */
  count?: number;
  variant?: "spinner" | "cards" | "inline";
}

export default function LoadingState({
  message = "Memuat data...",
  count = 3,
  variant = "spinner",
}: LoadingStateProps) {
  if (variant === "inline") {
    return (
      <div className={styles.inline} aria-live="polite" aria-busy="true">
        <div className="spinner" role="status" aria-label={message} />
        <span className={styles.inlineText}>{message}</span>
      </div>
    );
  }

  if (variant === "cards") {
    return (
      <div className={styles.cards} aria-live="polite" aria-busy="true">
        {Array.from({ length: count }).map((_, i) => (
          <div key={i} className={styles.cardSkel}>
            <div className={`skeleton ${styles.skelImg}`} />
            <div className={styles.skelBody}>
              <div className={`skeleton ${styles.skelLine} ${styles.lg}`} />
              <div className={`skeleton ${styles.skelLine} ${styles.md}`} />
              <div className={`skeleton ${styles.skelLine} ${styles.sm}`} />
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className={styles.center} aria-live="polite" aria-busy="true">
      <div className="spinner" role="status" aria-label={message} />
      <p className={styles.text}>{message}</p>
    </div>
  );
}