import * as React from 'react';
import { FC } from 'react';
import { style } from 'typestyle';

interface MediaProgressProps {
  totalItems: number;
  currentIndex: number;
}

const MediaProgress: FC<MediaProgressProps> = ({ totalItems, currentIndex }) => {
  // array of the total number of items
  const items = Array.from({ length: totalItems }, (_, index) => index);
  
  return (
    <div className={styles.container}>
      {items.map((index) => (
        <div 
          key={index} 
          className={`${styles.progressBar} ${index <= currentIndex ? styles.active : styles.inactive}`}
        />
      ))}
    </div>
  );
};

export default MediaProgress;

const styles = {
  container: style({
    position: 'absolute',
    top: 8,
    left: 0,
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: '0 4px',
    zIndex: 10,
    boxSizing: 'border-box',
  }),
  
  progressBar: style({
    height: 2,
    flex: 1,
    margin: '0 2px',
    borderRadius: 1,
  }),
  
  active: style({
    backgroundColor: 'white',
  }),
  
  inactive: style({
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
  }),
};