import React from 'react';

function SkeletonCard({ wide = false }: { wide?: boolean }) {
  return (
    <div className={`skeleton-card ${wide ? 'skeleton-card-wide' : ''}`}>
      <div className="skeleton-line skeleton-line-short" />
      <div className="skeleton-line skeleton-line-tall" />
    </div>
  );
}

export default function LoadingSkeleton() {
  return (
    <div className="skeleton-container">
      <div className="skeleton-stats">
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
      </div>
      <div className="skeleton-charts">
        <SkeletonCard wide />
        <SkeletonCard wide />
      </div>
    </div>
  );
}
