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

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

interface LinkPaymentDateGroupProps {
  date: string;
  items: LinkPaymentTransaction[];
}

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

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

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