frontend/src/components/shared/ProgressBar/SeekableProgressBar.js

import React, { useState } from 'react';
import { LinearProgress, Box } from '@mui/material';
import './SeekableProgressBar.css';

const SeekableProgressBar = ({ 
  progress, 
  buffer, 
  onSeek,
  width = '100%',
  height = '6px',
  margin = '10px', 
  borderRadios = '10px'
}) => {
  const handleMouseDown = (event) => {
    const progressBar = event.currentTarget;
    const rect = progressBar.getBoundingClientRect();
    const seekPosition = ((event.clientX - rect.left) / rect.width) * 100;
    onSeek(seekPosition);
  };

  const handleMouseMove = (event) => {
    if (isSeeking) {
      const progressBar = event.currentTarget;
      const rect = progressBar.getBoundingClientRect();
      const seekPosition = ((event.clientX - rect.left) / rect.width) * 100;
      onSeek(seekPosition);
    }
  };

  const [isSeeking, setIsSeeking] = useState(false);

  return (
    <Box
      onMouseDown={(event) => {
        setIsSeeking(true);
        handleMouseDown(event);
      }}
      onMouseUp={() => setIsSeeking(false)}
      onMouseLeave={() => setIsSeeking(false)}
      onMouseMove={handleMouseMove}
      sx={{ position: 'relative', width: width }}
    >
      <LinearProgress 
        variant="buffer" 
        value={progress} 
        valueBuffer={buffer}
        sx={{ height: height, margin: margin, borderRadius:borderRadios}} 
      />
      <Box
        sx={{
          position: 'absolute',
          width: '95%',
          height: '100%',
          cursor: 'pointer',
          top: 0,
          left: 0,
        }}
      />
    </Box>
  );
};

export default SeekableProgressBar;