import React from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import selectedTheme from "../../../../../themes";
import { NextButtonContainer } from "../../CreateOffer.styled";

const NextButton = (props) => {
  const { t } = useTranslation();
  const formik = props.formik;
  return (
    <NextButtonContainer
      type="submit"
      variant="contained"
      height="48px"
      fullWidth
      buttoncolor={selectedTheme.colors.primaryPurple}
      textcolor="white"
      onClick={formik.handleSubmit}
      disabled={
        props.imagesEmpty === props.numberOfImages ||
        formik.values?.condition?.length === 0 ||
        !formik.values?.condition ||
        formik.values?.condition === "default"
      }
    >
      {t("offer.continue")}
    </NextButtonContainer>
  );
};

NextButton.propTypes = {
  formik: PropTypes.any,
  imagesEmpty: PropTypes.any,
  numberOfImages: PropTypes.any,
};

export default NextButton;
