import React from "react";

import { Text, TextProps } from "@arc-ui/components/Text";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";

export const MultiLineText = ({ text, ...textProps }: MultiLineTextProps) => {
  if (!text) return null;

  const paragraphs = text.split(/\\n|\n/).filter((p) => p.trim());

  return (
    <>
      {paragraphs.map((paragraph, index) => (
        <span key={`informationcard-text-${index}`}>
          {index > 0 && <VerticalSpace size="8" />}
          <Text {...textProps}>{paragraph}</Text>
        </span>
      ))}
    </>
  );
};

interface MultiLineTextProps extends Partial<TextProps> {
  text?: string;
}