import { Tag } from '@blueprintjs/core'
import { css } from '@emotion/css'

const ExerciseTags = ({
  finished,
  running,
}: {
  running: boolean
  finished: boolean
}) => (
  <div
    className={css`
      display: flex;
      gap: 0.5rem;
    `}
  >
    {running && (
      <Tag intent='success' round large>
        Running
      </Tag>
    )}
    {finished && (
      <Tag intent='success' round large>
        Finished
      </Tag>
    )}
    {!running && !finished && (
      <Tag intent='warning' round large>
        Paused
      </Tag>
    )}
  </div>
)

export default ExerciseTags
