import React from 'react';

interface SkeletonBlockProps {
  width?: 'full' | 'auto' | string;
  height?: 'full' | 'auto' | string;
  rounded?: 'none' | 'sm' | 'md' | 'full';
}

const SkeletonBlock: React.FC<SkeletonBlockProps> = ({
  width = 'full',
  height = '4',
  rounded = 'md',
}) => {
  const widthClass = width === 'full' ? 'w-full' : width === 'auto' ? 'w-auto' : `w-[${width}]`;
  const heightClass = height === 'full' ? 'h-full' : height === 'auto' ? 'h-auto' : `h-[${height}]`;
  
  const roundedMap = {
    none: 'rounded-none',
    sm: 'rounded-sm',
    md: 'rounded-md',
    full: 'rounded-full',
  };

  return (
    <div 
      className={`
        ${widthClass} 
        ${heightClass} 
        ${roundedMap[rounded]} 
        bg-zinc-200 
        dark:bg-zinc-700 
        animate-pulse
      `} 
    />
  );
};

export default SkeletonBlock;