import React from 'react';

import './ComponentName.scss';

type ComponentNameProps = {
  /**
   * Stringified html
   * */
  children?: string,
  /**
   * Whether the component is active
   * */
  isActive?: boolean,
  /**
   * Background color by name (see color docs in buflib_docs)
   * */
  colorName?: string,
};

/**
 * This is the description of my component
 */
const ComponentName = ({
  children = '',
  isActive = false,
  colorName = 'green-4',
}: ComponentNameProps) => (
  <div
    className={`prefix-component-name prefix-component-name--${
      isActive ? 'is-active' : 'is-inactive'
    } bl-bg-${colorName}`}
  >
    <div className="prefix-component-name__title">
      {isActive ? 'Active' : 'Inactive'}
    </div>
    <div
      className="prefix-component-name__my-element"
      dangerouslySetInnerHTML={{ __html: children }}
    />
  </div>
);

export default ComponentName;