import React from 'react';

interface IProps {
  scale: number;
  live?: boolean;
  left: number;
  time: number;
}

const styles = {
  display: 'block',
  pointerEvents: 'none' as const,
  height: '10px',
  zIndex: 1,
}
const replayBg = '#d0d4f2' // active blue border
const liveBg = 'rgba(66, 174, 94, 0.3)' // light green shade

/** Playtime progress bar */
export function ProgressBar ({ scale, live = false, left, time }: IProps) {
  return (
    <div
      style={{
        ...styles,
        width: `${ time * scale }%`,
        backgroundColor: live && left > 99 ? liveBg : replayBg
      }}
    />
  )
}

ProgressBar.displayName = 'ProgressBar';