Skeleton Loader

'use client';

import type { HTMLAttributes } from 'react';
import './SkeletonList.css';

/**
 * SkeletonList — Shimmering loading placeholder for lists or feed items.
 *
 * @param count - Optional. Number of rows. Default 3.
 */
export interface SkeletonListProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
}

export function SkeletonList({ count = 3, className, ...rest }: SkeletonListProps) {
  return (
    <div aria-hidden="true" {...rest} className={['skeleton-list', className].filter(Boolean).join(' ')}>
      {Array.from({ length: count }, (_, i) => (
        <div key={i} className="skeleton-item">
          <div className="skeleton-avatar" />
          <div className="skeleton-content">
            <div className="skeleton-line skeleton-line--title" />
            <div className="skeleton-line skeleton-line--body" />
          </div>
        </div>
      ))}
    </div>
  );
}

export default SkeletonList;

/* SkeletonList — ported from astro-component-kit (feedback/SkeletonList.astro) */

.skeleton-list { display: flex; flex-direction: column; width: 100%; }

.skeleton-item { 
  display: flex; gap: var(--sp-4, 1rem); 
  padding: var(--sp-4, 1rem) 0; 
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.05)); 
}

.skeleton-avatar { 
  width: 48px; height: 48px; 
  border-radius: var(--r-full, 50%); 
  background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
  flex-shrink: 0;
}

.skeleton-content { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }

.skeleton-line { 
  height: 12px; 
  background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
  border-radius: var(--r-sm, 6px); 
  position: relative; overflow: hidden;
}

.skeleton-line--title { width: 40%; height: 14px; }
.skeleton-line--body { width: 85%; }

.skeleton-item div::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent); 
  animation: skeleton-list-skeleton-shimmer 1.8s infinite; 
  transform: translateX(-100%);
}

@keyframes skeleton-list-skeleton-shimmer { 
  100% { transform: translateX(100%); } 
}