import React from "react";
import PropTypes from "prop-types";
import ButtonComponent from "../button";
import {
  CardContainer,
  HeaderContainer,
  PlanName,
  Date,
  ColumnContainer,
  ColumnsContainer,
  Value,
  Label,
} from "./style/style";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const SubscribedCard = ({
  planName,
  currentPlan,
  projectedPlan,
  onUpgrade,
}) => {
  const { findText } = useTranslation(wordStore);
  return (
    <CardContainer>
      <HeaderContainer>
        <PlanName>{planName}</PlanName>
        <ButtonComponent
          type="primary"
          text={findText("Upgrade")}
          onClick={onUpgrade}
        />
      </HeaderContainer>
      <ColumnsContainer>
        <ColumnContainer>
          <Value className="current">{`$${currentPlan?.cost}`}</Value>

          <div className="info">
            <Label>{findText("Current Plan")}</Label>
            <Date>
              {findText("Last subscription:")}
              {currentPlan?.date}
            </Date>
          </div>
        </ColumnContainer>
        <ColumnContainer>
          <Value className="projected">{`$${projectedPlan?.cost}`}</Value>

          <div className="info">
            <Label>{findText("Projected Plan")}</Label>
            <Date>
              {findText("Next subscription:")}
              {projectedPlan?.date}
            </Date>
          </div>
        </ColumnContainer>
      </ColumnsContainer>
    </CardContainer>
  );
};
SubscribedCard.propTypes = {
  planName: PropTypes.string.isRequired,
  currentPlan: PropTypes.shape({
    amount: PropTypes.number.isRequired,
    date: PropTypes.string.isRequired,
  }).isRequired,
  projectedPlan: PropTypes.shape({
    amount: PropTypes.number.isRequired,
    date: PropTypes.string.isRequired,
  }).isRequired,
  onUpgrade: PropTypes.func.isRequired,
};
export default SubscribedCard;
