import type { CSSProperties } from 'react'

export const Progress = ({ value, size = '100%' }: { value: number; size?: string }) => {
  return (
    <div
      style={{ '--parent-width': size } as CSSProperties}
      className="w-(--parent-width) flex justify-center relative rounded-md overflow-hidden h-2 mt-8"
    >
      <div className="w-full absolute top-0 left-0 h-2.5 bg-(--discreet-border)" data-testid="progress-bg" />
      <div
        style={{ '--child-width': `calc(${value}*100%)` } as CSSProperties}
        className="w-(--child-width) absolute h-2.5 top-0 left-0 bg-primary"
        data-testid="progress-filled"
      />
    </div>
  )
}
