import type { CSSProperties } from 'react'
import './ListSkeleton.scss'

type ListSkeletonProps = {
  rows?: number
}

export function ListSkeleton({ rows = 8 }: ListSkeletonProps) {
  return (
    <div className="list-skeleton" aria-label="Loading data" aria-busy="true">
      {Array.from({ length: rows }).map((_, index) => (
        <div className="list-skeleton__item" key={index}>
          <span className="list-skeleton__icon" />

          <div className="list-skeleton__content">
            <span className="list-skeleton__line list-skeleton__line--title" />
            <span
              className="list-skeleton__line"
              style={{
                '--list-skeleton-line-width': index % 2 === 0 ? '42%' : '56%',
              } as CSSProperties}
            />
          </div>

          <span className="list-skeleton__meta" />
        </div>
      ))}
    </div>
  )
}
