import React from "react";

import "./Entity.scss";

import {AddToList} from "./AddToList";

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

  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>
        <AddToList type={props.type} entity={props.entity}/>
      </div>

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