/** @format */

import React, { Fragment } from "react";
import styled from "styled-components";

import Divider from "./Divider";
import TextExpand from "./TextExpand";
import { device } from "../config/media";
import { ExtraStyleProps } from "../types/genericTypes";

const Wrapper = styled.dl`
  width: 100%;
  max-width: 70vw;
  display: flex;
  flex-direction: column;
  font-size: ${({ theme }) => theme.fontSizes.medium};
  text-align: left;

  @media ${device.tablet} {
    max-width: 80vw;
  }

  @media ${device.mobileL} {
    max-width: 90vw;
  }
`;

interface TextExpandListProps extends ExtraStyleProps {
  data: { title: string; content?: string }[];
}

function TextExpandList({ data, borderColor }: TextExpandListProps) {
  const dataLength = data && data.length;
  return (
    <Wrapper>
      {data.length
        ? data.map((item, index) => (
            <Fragment key={index}>
              <TextExpand title={item.title} content={item?.content} />
              {index + 1 < dataLength ? (
                <Divider
                  borderColor={borderColor}
                  borderWidth="1px"
                  margin="12px 0"
                />
              ) : null}
            </Fragment>
          ))
        : null}
    </Wrapper>
  );
}

export default TextExpandList;