import React from "react";

import theme from "mazlo-theme";

import StyleSheet from "../../services/StyleSheet";
import { Text } from "../Text";
import { View } from "../View";

type Props = {
  children: React.ReactNode;
  type: "bullet" | "ordered";
};

const ListNode = ({ children, type }: Props) => {
  const asType = type === "ordered" ? "ol" : "ul";

  return (
    <View as={asType}>
      {React.Children.map(children, (child, index) => {
        return (
          <Text as="li">
            <Text
              inherit
              style={[
                styles.bullet,
                { width: theme.styles?.[asType]?.paddingLeft || 40 },
              ]}
            >
              {type === "ordered" ? `${index + 1}.` : "\u2022"}
            </Text>
            {child}
          </Text>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  bullet: {
    left: 0,
    position: "absolute",
    paddingRight: theme.space[1],
    textAlign: "right",
  },
});

export default ListNode;