import { LegacyRef } from "react"
import Loader, { LoaderColor } from "../Loader"
import styles from "./styles.module.css"

type ProcessItemProps = {
  top: number
  label: string
  isDone: boolean
  refItem: LegacyRef<HTMLDivElement>
}

function ProcessItem({ top, label, isDone, refItem }: ProcessItemProps): JSX.Element {

  return (
    <div ref={refItem} className={styles['process-item']} style={{ top: top }}>
      <div className={styles['process-item__pick']}>
        {
          isDone
          ? <img className={styles['process-item__icon']} src="/check-mark.webp" alt="check" />
          : <Loader color={LoaderColor.White} />
          }
      </div>
      <div className={styles['process-item__label']}>{label}</div>
    </div>
  )
}

export default ProcessItem
