bubble.js

import React from 'react'
import { DONE } from '../../../utility/constants/util'
import RoundedCheckbox from '../../atoms/check-box/rounded'
import { renderCreatedAt, renderDueDate, renderTags } from './bubble-helper'

const CREATED_AT = 'Created:'

export default function Bubble({ data }) {
  const { title, tags, dates, status, _id, _class } = data

  return (
    <div className={`bubble-wrapper ${_class} ${status}`}>
      <div className="left">
        <div className="action">
          <RoundedCheckbox id={_id} checked={status === DONE} />
        </div>
        <div className="data">
          <div className="name">{title}</div>
          <div className="created-on">{`${CREATED_AT} ${renderCreatedAt(
            dates.createdAt
          )}`}</div>
          <div className="tags">{renderTags(tags)}</div>
        </div>
      </div>
      <div className="right">
        <div className="due-on">{renderDueDate(dates.dueDate)}</div>
      </div>
    </div>
  )
}