import React from "react";
import type { Content, Data } from "../Components";
import { generateReactElements } from "../index";

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

export const Container = ({ className, content, children, id }: Props) => {
  return (
    <div className={className} id={id}>
      {children.map((child, index) => (
        <React.Fragment key={index}>
          {typeof child === "string" ? child : generateReactElements(child, content)}
        </React.Fragment>
      ))}
    </div>
  );
};