// import React from "react";
// import type { Data } from "../Components";

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

// export const UnorderedList = ({ className, children }: Props) => {
//   return (
//     <ul className={className}>
//       {children.map((child, index) => {
//         const text = child.content ? (child.content[0] as unknown as string) : "";
//         return <li key={index}>{text}</li>;
//       })}
//     </ul>
//   );
// };

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 UnorderedList = ({ className, children, content }: Props) => {

  return (
    <ul 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>
        );
      })}
    </ul>
  );
};