import './LabelCard.scss';

export interface LabelCardProps {
  /**
   * label | label to be displayed on top of the card
   */
  label: string;
  /**
   * title | title of the card
   */
  title: string;
  /**
   * type | type of the card
   */
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
  children?: any;
}
const LabelCard = ({
  variant = 'primary',
  label = 'primary',
  size = 'medium',
  title = 'Basic Label card',
  children = '',
}: LabelCardProps) => {
  return (
    <div
      className={`storybook-label-card-container storybook-label-card-container--${variant} ${size ? size : ''}`}
    >
      <div className="label-wrapper">
        <div className={`card-label card-label--${variant}`}>{label}</div>
      </div>
      <div className={`card-title card-title--${variant}`}>{title}</div>
      <div className="card-content">{children}</div>
    </div>
  );
};
export default LabelCard;