import React from 'react';
import styles from './silke-skeleton.scss';

interface SilkeSkeletonProps {
  kind?: 'multiline' | 'header' | 'header-text';
  className?: string;
  style?: React.CSSProperties;
}

export const SilkeSkeleton = ({ kind, className, style, ...rest }: SilkeSkeletonProps) =>
  kind === 'multiline' ? (
    <div className={styles.root + (className ? ` ${className}` : '')} style={style} {...rest}>
      <p className={styles.skeleton} />
      <p className={styles.skeleton} />
      <p className={styles.skeleton} />
    </div>
  ) : (
    <div className={styles.skeleton + (className ? ` ${className}` : '')} style={style} {...rest} />
  );