import { useState } from 'react'
import './HeadCouponModal.css'
import { Button } from 'antd'
// import nouseImg from '../../static/coupon/nouse.png'
export default function HeadCouponModal() {
    const [title, setTitle] = useState('未使用')
    return (
        <div>
            <div className='headModal-top'>
                <div className={title == '未使用' ? 'top-active' : 'top-title'}
                    onClick={() => {
                        setTitle('未使用')
                    }}
                >未使用</div>
                <div className={title == '已使用' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
                    onClick={() => {
                        setTitle('已使用')
                    }}
                >已使用</div>
                <div className={title == '已过期' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
                    onClick={() => {
                        setTitle('已过期')
                    }}
                >已过期</div>
            </div>
            <div className='headModal-bot'>
                <div style={{ display: title == '未使用' ? 'block' : 'none' }}>
                    <div className='couponList'>
                        <div className='nouse'>
                            <div className='nouse-left'>
                                {/* <img src={nouseImg} width={'100%'} height={'100%'} alt="" /> */}
                                <div className='nouse-left-num'>
                                    <div
                                        style={{ marginTop: -10 }}
                                    >
                                        <span style={{ fontSize: 30 }}>￥</span>
                                        <span style={{ fontSize: 60, fontWeight: 700 }}>100</span>
                                    </div>
                                    {/* <div >
                                        满100可用
                                    </div> */}
                                </div>
                            </div>
                            <div className='nouse-right'>
                                <div>
                                    可购买平台内任意软著时使用
                                </div>
                                <div>
                                    2024.08.09  12:15:04
                                </div>
                                <Button>去使用</Button>
                            </div>
                        </div>
                    </div>
                </div>
                <div style={{ display: title == '已使用' ? 'block' : 'none' }}>
                    已使用
                </div>
                <div style={{ display: title == '已过期' ? 'block' : 'none' }}>
                    已过期
                </div>
            </div>
        </div>
    )
}