import React, { forwardRef } from "react";
import PropTypes from "prop-types";
import {
  CartIcon,
  PlansContainer,
  PricesAltText,
  PricesComponentContainer,
  SendIcon,
  TruckIcon,
} from "./PricesComponent.styled";
import PricesHeader from "./PricesHeader/PricesHeader";
import Plan from "./Plan/Plan";
import { useTranslation } from "react-i18next";

const PricesComponent = forwardRef((props, ref) => {
  const { t } = useTranslation();
  return (
    <PricesComponentContainer id={props.id} ref={ref}>
      <PricesHeader />
      <PlansContainer>
        <Plan
          typeOfPlan={"beginner"}
          price="4,000 RSD"
          planIcon={<CartIcon />}
        />
        <Plan
          typeOfPlan={"entrepreneur"}
          price="10,000 RSD"
          highlighted
          planIcon={<TruckIcon />}
        />
        <Plan
          typeOfPlan={"businessman"}
          price="25,000 RSD"
          planIcon={<SendIcon />}
        />
      </PlansContainer>
      <PricesAltText>{t("prices.altText")}</PricesAltText>
    </PricesComponentContainer>
  );
});

PricesComponent.displayName = "PricesComponent";

PricesComponent.propTypes = {
  children: PropTypes.node,
  id: PropTypes.string,
};

export default PricesComponent;
