import clsx from 'clsx';

interface SkeletonProps {
  variant?: 'avatar' | 'text' | 'rect' | 'icon';
  animation?: 'pulsate' | 'wave' | null; // disable animation completely with null
  className?: string;
  size?: string;
  display?: string;
  radius?: string;
}
export function Skeleton({
  variant = 'text',
  animation = 'wave',
  size,
  className,
  display = 'block',
  radius = 'rounded',
}: SkeletonProps) {
  return (
    <span
      className={clsx(
        'overflow-hidden relative bg-fg-base/4 bg-no-repeat will-change-transform skeleton',
        radius,
        skeletonSize({variant, size}),
        display,
        variant === 'text' && 'scale-y-[0.6] origin-[0_55%]',
        variant === 'avatar' && 'flex-shrink-0',
        variant === 'icon' && 'mx-8 flex-shrink-0',
        animation === 'wave' && 'skeleton-wave',
        animation === 'pulsate' && 'skeleton-pulsate',
        className
      )}
      aria-busy
      aria-live="polite"
    />
  );
}

interface SkeletonSizeProps {
  variant: SkeletonProps['variant'];
  size: SkeletonProps['size'];
}
function skeletonSize({variant, size}: SkeletonSizeProps): string | undefined {
  if (size) {
    return size;
  }

  switch (variant) {
    case 'avatar':
      return 'h-40 w-40';
    case 'icon':
      return 'h-24 h-24';
    case 'rect':
      return 'h-full w-full';
    default:
      return 'w-full';
  }
}