import React from "react";

import { Stack } from "../Stack";
import { Text } from "../Text";
import { View } from "../View";

type Props = {
  children: React.ReactNode;
  node: {
    heading?: string;
    content: { title: string }[];
  };
};

const DescriptionListNode = ({ node, children }: Props) => {
  return (
    <>
      {!!node.heading && <Text as="p">{node.heading}</Text>}
      <View as="dl">
        {React.Children.map(children, (child, index) => {
          return (
            <Stack key={index} inline gap={8}>
              <Text inherit as="dt">
                {node.content[index].title}
              </Text>
              <Text inherit as="dd">
                {child}
              </Text>
            </Stack>
          );
        })}
      </View>
    </>
  );
};

export default DescriptionListNode;