import moment from 'moment';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { AdditionalServiceCategory, DetailInfoSectionProps } from '../../model/types';
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';

export const DetailInfoWrap = ({
    additionalServiceCategory,
    detailInfo
}: DetailInfoSectionProps) => {

    console.log("DetailInfo Check: ", detailInfo)

    return (
        <>
            <div className="txn-section">
                <div className="section-title">상세 정보</div>
                <ul className="kv-list">
                    {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) &&
                        <>
                            < li className="kv-row">
                                <span className="k">이메일</span>
                                <span className="v">{detailInfo?.email}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">휴대폰 번호</span>
                                <span className="v">{detailInfo?.phoneNumber}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">상품명</span>
                                <span className="v">{detailInfo?.goodsName && detailInfo?.goodsName}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">주문번호</span>
                                <span className="v">{detailInfo?.moid}</span>
                            </li>
                        </>
                    }
                </ul >
            </div >
        </>
    )
};