import React from "react";

import { useSelector } from "react-redux";

import MyInfoNoResults from "../MyInfoNoResults/MyInfoNoResults";
import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer";
import PaymentItem from "./PaymentItem";

export default function PaymentTab() {
  const cardDatas = useSelector((state) => state.card.cardData);

  return (
    <MyInfoTabContentsContainer>
      {cardDatas && cardDatas.cardInfo ? (
        <PaymentItem
          easyPmtSeq={cardDatas.cardInfo.easyPmtSeq}
          cardKnd={cardDatas.cardInfo.cardKnd}
          cardNo={cardDatas.cardInfo.cardNo}
        />
      ) : (
        <MyInfoNoResults type="PAYMENT" />
      )}
    </MyInfoTabContentsContainer>
  );
}
