import React from 'react'
import ftDateFormat from '@financial-times/ft-date-format'

/**
 * Component for rendering live blog status indicator.
 *
 * @param {Object} props
 * @param {Boolean} props.realtime
 * @param {string} props.lastUpdatedDateTime
 */
type LiveBlogIndicatorProps = {
  realtime?: boolean
  lastUpdatedDateTime: string
}
const LiveBlogIndicator: React.FC<LiveBlogIndicatorProps> = ({
  realtime,
  lastUpdatedDateTime,
}) => {
  const isLive = Boolean(realtime)

  return (
    <div className="live-blog-indicator">
      {isLive && (
        <span className="o-labels-indicator o-labels-indicator--live o-labels-indicator--inverse live-blog-indicator__status live-blog-indicator__status--live">
          <span
            className="o-labels-indicator__status"
            data-live-blog-status="live"
          >
            {/* Origami o-label component expects whitespace to output correctly */}{' '}
            Live
          </span>
        </span>
      )}

      <time
        id="live-blog-updated-timestamp"
        data-o-component="o-date"
        className="o-date live-blog-indicator__timestamp o3-type-label"
        dateTime={lastUpdatedDateTime}
        data-o-date-format="time-ago-no-seconds"
      >
        <span>Updated </span>
        <span data-o-date-printer>
          {ftDateFormat.timeAgo(lastUpdatedDateTime)}
        </span>
      </time>
    </div>
  )
}

export default LiveBlogIndicator