import React from 'react'
import { TruckSvg } from '../../assets/svg/truckSvg'

interface ProgressProps {
  done: number
  tagValue?: number | string
}

/**
 * Progress component.
 *
 * Renders a progress bar that animates the width based on the `done` prop.
 *
 * @param props - The component props.
 * @param props.done - The percentage of progress.
 */
export const Progress = ({ done, tagValue }: ProgressProps) => {
  const [style, setStyle] = React.useState<React.CSSProperties>({})

  React.useEffect(() => {
    const newStyle: React.CSSProperties = {
      opacity: 1,
      width: `${done}%`,
    };
    setStyle(newStyle);
  }, [done]);
  

  return (
    <div className="fr-progress fr-relative">
      <div className="fr-progress-done" style={style}>
      <div className='fr-progress-dot-container'>
        <div className='fr-white-dot'></div>
        <div className='fr-white-dot'></div>
        <div className='fr-white-dot'></div>
        <div className='fr-white-dot'></div>
        <div className='fr-white-dot'></div>
      </div> 
        {tagValue && (
          <span className="fr-absolute fr-bg-white fr-rounded-md fr-text-center fr-text-sm">
            {tagValue}
          </span>
        )}
      </div>
      <div className='fr-z-10 fr--ml-10'>
          <TruckSvg/>
        </div>
    </div>
  )
}