import React from "react";
import "./Entity.scss"

export const Entity = (props) => {
  const hasCover = props.cover;
  const hasTags = props.tags && props.tags.length > 0;
  const hasButton = props.onButtonClick || props.buttonText

  return (
    <div className='entity'>
      <div>
        <div className='header'>
          <h1 className='title'>{props.title}</h1>
          <h4 className='subtitle'>{props.subtitle}</h4>
        </div>
        <div className='body'>
          {hasTags &&
            <ul className='tags'>
              {props.tags.map((tag, index) => (<li className='tag' key={index}>{tag}</li>))}
            </ul>
          }
        </div>
        {hasButton &&
          <button className='button' onClick={props.onButtonClick}>{props.buttonText}</button>
        }
      </div>

      {hasCover &&
        <div className='cover'>
          {props.cover}
        </div>
      }
    </div>
  )
}