'use client'

import React from "react";
import Image from "next/image";
import {Modal, Space} from "antd";
import dayjs from "dayjs";
import Link from "next/link";

import iconDateSvg from '@/assets/icon-date.svg'

import styles from './page.module.sass'

export default function PaymentInfoListItem({value}: any) {
  return (
    <div key={value.slug} className={styles.item}>
      <div className={styles.item_head}>
        <div className={styles.item_head_title}>
          {value.price ? (
            <div onClick={() => {
              Modal.info({
                // title: 'This is a notification message',
                content: (
                  <div className={styles.item_modal}>
                    <p>查看此资料需付费 {value.price} ，确认付费阅读，请发送邮件至 edu@pingcap.cn 提交申请</p>
                    <p>付费资料：{value.title}</p>
                    {/*<p style={{textAlign: 'right'}}>*/}
                    {/*  <Image src={wechatQrCodeImage} alt={'PKXC2015'} width={200} height={200}/>*/}
                    {/*</p>*/}
                  </div>
                ),
                onOk() {
                },
                okText: '关闭',
                width: 640,
                centered: true,
              });
            }}>{value.title}</div>
          ) : (
            <Link href={`/payment-info/${value.slug}`}>{value.title}</Link>
          )}
        </div>
        <div className={styles.item_head_price}>
          {value.price ?? '限时免费 ￥0 元'}
        </div>
      </div>
      <Space className={styles.item_date}>
        <Image src={iconDateSvg} alt={'日期'} height={16}/>
        {dayjs(value.date).format('YYYY-MM-DD')}
      </Space>
      <div className={styles.item_summary}>{value.summary}</div>
    </div>
  )
}