import React from "react";
import PropTypes from "prop-types";
import {
  ReviewCard,
  SecondStepCreateReviewContainer,
} from "./SecondStepCreateReview.styled";
import { CreateReviewTitle, NextButton } from "../CreateReview.styled";
import { useTranslation } from "react-i18next";
import selectedTheme from "../../../themes";

const SecondStepCreateReview = (props) => {
  console.log(props);
  const {t} = useTranslation();

  const goToNextStep = () => {
    props.goToNextStep();
  }

  return (
    <SecondStepCreateReviewContainer>
      <CreateReviewTitle>{t("reviews.modalTitle")}</CreateReviewTitle>
      <ReviewCard
        givingReview
        profileReviews={
          [{
            name: props.interlocutor?.name,
            image: props.interlocutor?.image,
            isGoodCommunication: props.review?.correctCommunication,
            isSuccessfulSwap: props.review?.exchangeSucceed,
            quote: props.review.comment,
          }]
        }
      />
      <NextButton
        variant="contained"
        buttoncolor={selectedTheme.primaryPurple}
        fullWidth
        height="48px"
        onClick={goToNextStep}
      >
        {t("reviews.leaveComment")}
      </NextButton>
    </SecondStepCreateReviewContainer>
  );
};

SecondStepCreateReview.propTypes = {
  children: PropTypes.node,
  review: PropTypes.any,
  offer: PropTypes.any,
  interlocutor: PropTypes.any,
  goToNextStep: PropTypes.func,
};

export default SecondStepCreateReview;
