import { clsx } from 'clsx';

import Body from '../body';
import { Typography } from '../common';
import Progress from '../progress';
import Title from '../title/Title';

export type ProgressBarProps = {
  className?: string;
  description?: React.ReactNode;
  id: string;
  title: React.ReactNode;
  progress: { value: number; max: number };
  textEnd: React.ReactNode;
};

const ProgressBar = ({
  className,
  description,
  id,
  title,
  progress,
  textEnd,
}: ProgressBarProps) => {
  return (
    <div className={clsx('np-progress-bar', className)}>
      <label className="np-progress-bar__title m-b-1" htmlFor={id}>
        <Title type={Typography.TITLE_BODY} className="m-b-1 text-primary">
          {title}
        </Title>
        {description && <Body>{description}</Body>}
      </label>
      <Progress id={id} progress={progress} />
      <Body
        as="p"
        type={Typography.BODY_DEFAULT_BOLD}
        className="d-flex justify-content-end text-primary m-b-0"
      >
        {textEnd}
      </Body>
    </div>
  );
};

export default ProgressBar;
