import React from 'react'
import Bubble from './bubble'
import styled from 'styled-components'

export default function Bubbles({ bubbles, children }) {
  if (bubbles?.length > 0 || children?.length > 0) {
    return (
      <StyledBubblesWrapper>
        <div className="bubbles-wrapper">
          {bubbles.map((bubble) => (
            <Bubble data={bubble} key={bubble?.dates?.createdAt}></Bubble>
          ))}
          {children}
        </div>
      </StyledBubblesWrapper>
    )
  }
  return null
}

const StyledBubblesWrapper = styled.div`
  .bubbles-wrapper > .bubbles-wrapper {
    border: none;
    margin: 0;
    padding: 0;
  }

  .bubble-wrapper {
    border: 1px solid #ccc;
    border-radius: 8px;
    background: white;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .round label {
        height: 16px;
        width: 16px;
      }
      .action {
        margin-right: 6px;
      }
    }
  }

  .bubble-wrapper.negative.pending {
    margin-bottom: 4px;
  }
`