export function CardSkeleton() {
  return (
    <div className="card">
      <div className="skeleton" style={{ height: 20, width: '60%', marginBottom: 12 }} />
      <div className="skeleton" style={{ height: 14, width: '80%', marginBottom: 8 }} />
      <div className="skeleton" style={{ height: 14, width: '40%' }} />
    </div>
  );
}

export function TableSkeleton({ rows = 5, cols = 4 }) {
  return (
    <div className="card" style={{ overflow: 'hidden' }}>
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} style={{ display: 'flex', gap: 16, padding: '0.75rem 1rem', borderBottom: i < rows - 1 ? '1px solid var(--gray-100)' : 'none' }}>
          {Array.from({ length: cols }).map((_, j) => (
            <div key={j} className="skeleton" style={{ height: 16, flex: 1 }} />
          ))}
        </div>
      ))}
    </div>
  );
}

export function KPISkeleton() {
  return (
    <div className="grid grid-4">
      {Array.from({ length: 4 }).map((_, i) => (
        <div key={i} className="card" style={{ padding: '1.25rem' }}>
          <div className="skeleton" style={{ height: 14, width: '50%', marginBottom: 8 }} />
          <div className="skeleton" style={{ height: 28, width: '30%' }} />
        </div>
      ))}
    </div>
  );
}
