import React, { CSSProperties, useMemo } from 'react'

import HncyCard from '@/pages/Home_v_2504/components/common/Card'
import icon1 from '@/assets/images/icon1.png'
import icon2 from '@/assets/images/icon2.png'

import styles from './index.less'
import DescriptionItem from '@/components/DescriptionItem'

export default function OverallSituation() {

    const statistic = useMemo(() => {
        return [
            {
                label: '处罚数量',
                value: 1000,
                unit: '件',
                icon: icon1
            },
            {
                label: '处罚金额',
                value: 862,
                unit: '万',
                icon: icon2
            }
        ]
    }, [])

    return (
        <HncyCard
            title='总体情况'
        >
            <div className={styles.situation}>
                {
                    statistic.map((item, index) => {
                        return (
                            <div className={styles.item} key={index}>
                                <div className={styles.icon}>
                                    <img src={item.icon} alt="" />
                                </div>
                                <div className={styles.content}>
                                    {/* <div className={styles.value}>{item.value}</div>
                                    <div className={styles.label}>{item.label}</div> */}
                                    <DescriptionItem
                                        value={item.value}
                                        valueStyle={valueStyle}
                                        name={item.label}
                                        unit={item.unit}
                                        unitStyle={unitStyle}
                                    />
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </HncyCard>
    )
}

const valueStyle: CSSProperties = {
    background: 'linear-gradient(180.00deg, rgb(170, 255, 246),rgb(37, 187, 255))',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    // textFillColor: 'transparent',
    fontFamily: 'D-DIN',
    fontSize: 28,
    fontWeight: 700,
}

const unitStyle: CSSProperties = {
    color: 'rgb(188, 206, 233)',
    fontFamily: '微软雅黑',
    fontSize: '16px',
    fontWeight: 400,
    lineHeight: '21px',
}