import moment from 'moment';
import 'moment/dist/locale/ko';
import { LinkPaymentPendingItem } from './link-payment-pending-item';
import { JSX } from 'react';

interface LinkPaymentPendingTransaction {
  transactionId: string;
  customerName: string;
  status: string;
  channel: string;
  amount: number;
}

interface LinkPaymentPendingDateGroupProps {
  date: string;
  items: LinkPaymentPendingTransaction[];
}

export const LinkPaymentPendingDateGroup = ({
  date,
  items
}: LinkPaymentPendingDateGroupProps) => {
  moment.locale('ko');
  const getStateDate = () => {
    let stateDate = moment(date).format('YY.MM.DD(ddd)');
    return stateDate;
  };

  const getLinkPaymentPendingItem = () => {
    const rs: JSX.Element[] = [];
    if (items && items.length > 0) {
      items.forEach((item, index) => {
        const key = 'LinkPaymentPendingItem-' + index;
        rs.push(
          <LinkPaymentPendingItem
            key={key}
            transactionId={item.transactionId}
            customerName={item.customerName}
            status={item.status}
            channel={item.channel}
            amount={item.amount}
          />
        )
      });
    }
    
    return rs;
  };

  return (
    <>
      <div className="date-header">{getStateDate()}</div>
      {getLinkPaymentPendingItem()}
    </>
  );
};