import React from "react";
import { Content, Data, generateReactElements } from "../Components";
import { Some } from "../utils/Some";
import { getClassName } from "../utils/getClassName";

type Props = {
  readonly className: string;
  readonly children: Data[];
  readonly content: Content[];
};

export const OrderedList = ({ className, children, content }: Props) => {
  return (
    <ol className={className}>
      {children.map((child, index) => {
        const liAttributes = child.attributes || {};
        const liClassName = Some(liAttributes.class)
          ? getClassName(liAttributes.class)
          : getClassName(liAttributes.classname);

        // Check if child.content has one string element
        if (child.content?.length === 1 && typeof child.content[0] === "string") {
          return (
            <li key={index} className={liClassName} {...liAttributes}>
              {child.content[0]}
            </li>
          );
        }

        const nestedChildren = child.content || [];

        return (
          <li key={index} className={liClassName} {...liAttributes}>
            {nestedChildren.map((nestedChild, nestedIndex) => (
              <React.Fragment key={nestedIndex}>
                {typeof nestedChild === "string"
                  ? nestedChild
                  : generateReactElements(nestedChild, content)}
              </React.Fragment>
            ))}
          </li>
        );
      })}
    </ol>
  );
};