import React from "react";
import CssFlex from "../../../ui/CssFlex";
import Typography from "../../../ui/Typography";
import CollapsableChipsList from "../../../ui/CollapsableChipsList";

var TabTexts = function TabTexts(props) {
  var texts = props.texts,
      translations = props.translations;
  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    color: "neutral",
    shade: 800,
    dangerouslySetInnerHTML: {
      __html: translations.headlines.replace("{headlines}", texts.headlines.length)
    }
  }), /*#__PURE__*/React.createElement(CssFlex, {
    gap: "xs"
  }, /*#__PURE__*/React.createElement(CollapsableChipsList, {
    items: texts.headlines,
    showerByDefault: 3
  })), /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    color: "neutral",
    shade: 800,
    dangerouslySetInnerHTML: {
      __html: translations.long_headlines.replace("{long_headlines}", texts.long_headlines.length)
    }
  }), /*#__PURE__*/React.createElement(CssFlex, {
    gap: "xs"
  }, /*#__PURE__*/React.createElement(CollapsableChipsList, {
    items: texts.long_headlines,
    showerByDefault: 3
  })), /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    color: "neutral",
    shade: 800,
    dangerouslySetInnerHTML: {
      __html: translations.descriptions.replace("{descriptions}", texts.descriptions.length)
    }
  }), /*#__PURE__*/React.createElement(CssFlex, {
    gap: "xs"
  }, /*#__PURE__*/React.createElement(CollapsableChipsList, {
    items: texts.descriptions,
    showerByDefault: 3
  })));
};

export default TabTexts;