import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import PropTypes from "prop-types";
import React from "react";
import GradientSVG from "../../GradientSVG/GradientSVG";
import { CircularWrapper, StyledTypography } from "./styles";

const CircularTimeFrame = ({
  title = "",
  type = "Positive",
  textSize = "14px",
  noCircularOutline = false,
  active,
  onClick,
  borderRadius,
  ...others
}) => {
  const getArrowIconByType = (type) => {
    switch (type) {
      case "Positive":
        return (
          <ArrowUpwardIcon
            style={{
              fill: "url(#gradientSVGPositive)",
              rotate: "45deg",
            }}
          />
        );
      case "Negative":
        return (
          <ArrowUpwardIcon
            style={{
              fill: "url(#gradientSVGNegative)",
              rotate: "140deg",
            }}
          />
        );
      default:
        return (
          <ArrowUpwardIcon
            style={{
              fill: "url(#gradientSVGSideways)",
              rotate: "90deg",
            }}
          />
        );
    }
  };
  return (
    <CircularWrapper
      type={type}
      noCircularOutline={noCircularOutline}
      active={active}
      borderRadius={borderRadius}
      {...others}
    >
      <GradientSVG />
      <StyledTypography type={type.toString()} textsize={textSize}>
        {title}
      </StyledTypography>
      {getArrowIconByType(type)}
    </CircularWrapper>
  );
};

CircularTimeFrame.propTypes = {
  title: PropTypes.string,
  width: PropTypes.string,
  height: PropTypes.string,
  type: PropTypes.string,
  textSize: PropTypes.string,
  noCircularOutline: PropTypes.bool,
  active: PropTypes.bool,
  borderRadius: PropTypes.string,
};

export default CircularTimeFrame;