/**
 * View Component: SkeletonCard
 * Loading skeleton for post cards while data is loading.
 *
 * Props:
 *   count: number of skeleton cards to render
 */

function SkeletonCard() {
  return (
    <div className="skeleton-card">
      <div className="skeleton-cover"></div>
      <div className="skeleton-body">
        <div className="skeleton-line short"></div>
        <div className="skeleton-line long"></div>
        <div className="skeleton-line medium"></div>
        <div className="skeleton-line short"></div>
      </div>
    </div>
  );
}

function SkeletonGrid({ count = 6 }) {
  return (
    <div className="skeleton-grid">
      {Array.from({ length: count }).map((_, i) => (
        <SkeletonCard key={i} />
      ))}
    </div>
  );
}

window.SkeletonCard = SkeletonCard;
window.SkeletonGrid = SkeletonGrid;