export const Skeleton = ({
  variant = 'text',
  width,
  height,
  className = '',
  ...props
}) => {
  const baseClasses = 'animate-pulse bg-gray-200 rounded';

  const variantClasses = {
    text: 'h-4',
    circular: 'rounded-full',
    rectangular: 'rounded',
  };

  const style = {};
  if (width) style.width = width;
  if (height) style.height = height;

  if (variant === 'circular') {
    return (
      <div
        className={`${baseClasses} ${variantClasses.circular} ${className}`}
        style={style}
        {...props}
      />
    );
  }

  if (variant === 'rectangular') {
    return (
      <div
        className={`${baseClasses} ${variantClasses.rectangular} ${className}`}
        style={style}
        {...props}
      />
    );
  }

  return (
    <div
      className={`${baseClasses} ${variantClasses.text} ${className}`}
      style={style}
      {...props}
    />
  );
};

export default Skeleton;

