import React from 'react';
import './SkeletonPro.css';

export default function SkeletonPro({ rows = 3, avatar = false, block = false, active = true }) {
  return (
    <div className={'aa-skeleton' + (active ? ' is-active' : '')}>
      {avatar ? (
        <div className="aa-skeleton-row">
          <div className="aa-skeleton-avatar" />
          <div className="aa-skeleton-lines">
            <div className="aa-skeleton-line" style={{ width: '40%' }} />
            <div className="aa-skeleton-line" style={{ width: '80%' }} />
          </div>
        </div>
      ) : null}
      {block ? <div className="aa-skeleton-block" /> : null}
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="aa-skeleton-line" style={{ width: (i % 2 === 0 ? 100 : 70) + '%' }} />
      ))}
    </div>
  );
}