import cx from "classnames";
import React from "react";

type HeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

export interface TimelineItem {
  description: React.ReactNode;
  label?: React.ReactNode;
  title: React.ReactNode;
}

export interface TimelineProps
  extends React.OlHTMLAttributes<HTMLOListElement> {
  items: TimelineItem[];
  titleTag?: HeadingTag;
}

const CLASS_ROOT = "timeline";

const Timeline: React.FC<TimelineProps> = ({
  items,
  className,
  start = 1,
  titleTag: TitleTag = "h3",
  ...other
}) => {
  return (
    <ol className={cx(CLASS_ROOT, className)} start={start} {...other}>
      {items.map((item, index) => {
        const itemNumber = start + index;
        const label = item.label ?? null;

        return (
          <li
            key={`${CLASS_ROOT}-item-${itemNumber}`}
            className={`${CLASS_ROOT}__item`}
          >
            <div className={`${CLASS_ROOT}__number-column`} aria-hidden="true">
              <span className={`${CLASS_ROOT}__number`}>{itemNumber}</span>
              {index !== items.length - 1 && (
                <div className={`${CLASS_ROOT}__line`} />
              )}
            </div>
            <span className={`${CLASS_ROOT}__label`}>{label}</span>
            <TitleTag className={`${CLASS_ROOT}__headline`}>
              {item.title}
            </TitleTag>
            <div className={`${CLASS_ROOT}__description`}>
              {item.description}
            </div>
          </li>
        );
      })}
    </ol>
  );
};

Timeline.displayName = "Timeline";

export { Timeline };