import {
  IonContent,
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
} from "@ionic/react";
import { Topic } from "../types";
import SkeletonText from "./SkeletonText";
import "../components/TopicList.css";

/**
 * This component creates a shimmering "skeleton" version of the list component.
 * It shows only when content isn't available yet (loading).
 */
function ListSkeleton({ items = 5 }: { items?: number }) {
  return (
    <>
      {Array(items)
        .fill(0)
        .map((_, i) => (
          <IonItem key={i}>
            <SkeletonText />
          </IonItem>
        ))}
    </>
  );
}

const TopicList: React.FC<{
  title?: string;
  topics: Topic[];
  loading?: boolean;
}> = ({ title, topics, loading }) => {
  console.log(topics);
  return (
    <IonList>
      {title ? (
        <IonListHeader>
          <IonLabel>{title}</IonLabel>
        </IonListHeader>
      ) : null}

      {loading && <ListSkeleton />}

      {!loading &&
        topics &&
        topics.map((topic: Topic) => {
          return (
            <IonItem
              key={topic.blockId}
              routerLink={`/article/${topic.blockId}`}
            >
              <p className="ListItemText">{topic.name}</p>
            </IonItem>
          );
        })}
    </IonList>
  );
};
export default TopicList;