import { Box } from './Box';

export interface SkeletonProps {
  width?: string | number;
  height?: string | number;
  variant?: 'text' | 'circular' | 'rectangular';
  animation?: 'pulse' | 'wave' | 'none';
}

export const Skeleton = ({ 
  width, 
  height, 
  variant = 'rectangular',
  animation = 'pulse' 
}: SkeletonProps) => {
  const variantClasses = {
    text: 'rounded-sm',
    circular: 'rounded-full',
    rectangular: 'rounded-none',
  };

  const animationClasses = {
    pulse: 'animate-pulse',
    wave: 'animate-shimmer', // Assuming shimmer is defined
    none: '',
  };

  const classes = [
    'bg-[var(--ui-color-bg-surface-muted)]',
    variantClasses[variant],
    animationClasses[animation],
  ].join(' ');

  return (
    <Box 
      width={width} 
      height={height} 
      className={classes}
      role="status"
      aria-label="Loading..."
    />
  );
};