/**
 * Skeleton Loader Components
 * 
 * Provides skeleton loading states for better UX while content is loading.
 */

import './Skeleton.css';

interface SkeletonProps {
  className?: string;
  width?: string | number;
  height?: string | number;
  circle?: boolean;
  rounded?: boolean;
}

/**
 * Base skeleton component
 */
export function Skeleton({ className = '', width, height, circle = false, rounded = true }: SkeletonProps) {
  const style: React.CSSProperties = {
    width: width || '100%',
    height: height || '1em',
    borderRadius: circle ? '50%' : rounded ? '4px' : '0',
  };

  return <div className={`skeleton ${className}`} style={style} aria-hidden="true" />;
}

/**
 * Table skeleton with rows and columns
 */
export function TableSkeleton({ rows = 5, cols = 4 }: { rows?: number; cols?: number }) {
  return (
    <div className="skeleton-table" role="status" aria-label="Loading table data">
      <div className="skeleton-table__header">
        {Array(cols)
          .fill(0)
          .map((_, i) => (
            <Skeleton key={`header-${i}`} height="20px" className="skeleton-table__header-cell" />
          ))}
      </div>
      {Array(rows)
        .fill(0)
        .map((_, rowIndex) => (
          <div key={`row-${rowIndex}`} className="skeleton-table__row">
            {Array(cols)
              .fill(0)
              .map((_, colIndex) => (
                <Skeleton key={`cell-${rowIndex}-${colIndex}`} height="16px" className="skeleton-table__cell" />
              ))}
          </div>
        ))}
    </div>
  );
}

/**
 * Card skeleton
 */
export function CardSkeleton() {
  return (
    <div className="skeleton-card" role="status" aria-label="Loading card">
      <Skeleton height="24px" width="60%" className="skeleton-card__title" />
      <Skeleton height="16px" width="100%" className="skeleton-card__content" />
      <Skeleton height="16px" width="80%" className="skeleton-card__content" />
    </div>
  );
}

/**
 * Metric card skeleton
 */
export function MetricCardSkeleton() {
  return (
    <div className="skeleton-metric-card" role="status" aria-label="Loading metric">
      <Skeleton height="14px" width="40%" className="skeleton-metric-card__label" />
      <Skeleton height="32px" width="60%" className="skeleton-metric-card__value" />
    </div>
  );
}
