import React, { FC, ReactType } from 'react';
import css from './index.module.css';
import classnames from 'classnames';

export interface ProgressBarProps {
  title?: string;
  steps?: {
    id: string;
    title: string;
    isActive: boolean;
    Link: ReactType;
    LinkProps: unknown;
  }[];
}

const ProgressBar: FC<ProgressBarProps> = ({ steps, title }) => {
  return (
    <div className={css.ProgressBar}>
      {title && <h2 className={css.progressBar__title}>{title}</h2>}
      <ul className={css.progressBar__list}>
        {steps &&
          steps.map(item => (
            <li className={css.progressBar__listItem} key={item.id}>
              {item.LinkProps && (
                <item.Link
                  className={classnames(css.progressBar__listItemWrap, {
                    [`${css.progressBar__listItemWrapActive}`]: item.isActive,
                  })}
                  {...item.LinkProps}
                >
                  {item.title}
                </item.Link>
              )}
            </li>
          ))}
      </ul>
    </div>
  );
};

export default ProgressBar;