import React from 'react';

interface ProgressCSSProps extends React.CSSProperties {
  '--progress-width': number;
  '--buffered-width': number;
}

interface AudioProgressBarProps
  extends React.ComponentPropsWithoutRef<'input'> {
  duration: number;
  currentProgress: number;
  buffered: number;
}

export default function AudioProgressBar(props: AudioProgressBarProps) {
  const { duration, currentProgress, buffered, ...rest } = props;

  const progressBarWidth = Number.isNaN(currentProgress / duration)
    ? 0
    : currentProgress / duration;
  const bufferedWidth = Number.isNaN(buffered / duration)
    ? 0
    : buffered / duration;

  const progressStyles: ProgressCSSProps = {
    '--progress-width': progressBarWidth,
    '--buffered-width': bufferedWidth,
  };

  return (
    <div className="group absolute inset-x-0 top-[30px] h-1">
      <input
        type="range"
        name="progress"
        className="progress-bar absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none bg-[#272B35]/15 transition-all before:absolute before:inset-0 before:h-full before:w-full before:origin-left before:bg-[#4D67BE] after:absolute after:h-full after:w-full after:bg-[#272B35]/15 dark:bg-gray-700"
        style={progressStyles}
        min={0}
        max={duration}
        value={currentProgress}
        {...rest}
      />
    </div>
  );
}
