import React, { useCallback } from "react";
import Item from "./Item";
import styled from "styled-components";

const Divider = styled.div`
  width: 100%;
  height: 1px;
  border-top: 1px solid #EEEEEE;
  margin-bottom: 6px;
  margin-top: 6px;
`;
const Margin = styled.div`
  height: 6px;
`;
const Widget = ({ data }) => {
  let isFirst = true;
  const isEnd = useCallback((idx) => idx === data.length - 1, [data]);
  const lst = [];
  data.forEach((item, idx) => {
    if (isEnd(idx)) {
      lst.push(<Item data={item} />);
      lst.push(<Margin />);
    } else if (isFirst) {
      lst.push(<Margin />);
      lst.push(<Item data={item} />);
      lst.push(<Divider />);
    } else {
      lst.push(<Item data={item} />);
      lst.push(<Divider />);
    }
    isFirst = false;
  });
  return <React.Fragment>{lst}</React.Fragment>;
};

export default Widget;
