import PropTypes from "prop-types";
import React from "react";
import CircularTimeFrame from "./CircularTimeFrame";
import { Container } from "./styles";

const MultiTimeFrame = ({ data, ...others }) => {
  return (
    <Container {...others}>
      {data.map((props, index) => (
        <CircularTimeFrame key={`circular-time-frame-${index}`} {...props} />
      ))}
    </Container>
  );
};

MultiTimeFrame.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      title: PropTypes.string,
      type: PropTypes.string,
      textSize: PropTypes.string,
      borderRadius: PropTypes.string,
      noCircularOutline: PropTypes.bool,
    })
  ),
};
export default MultiTimeFrame;