import { Typography } from 'antd';
import dayjs from 'dayjs';
import styles from './index.less';
const { Paragraph } = Typography;

interface AccidentItemProps {
  data: any;
  onClick?: () => void;
}

const AccidentItem = ({ data, onClick }: AccidentItemProps) => {
  return (
    <div className={styles.container} onClick={onClick}>
      <img src={data?.coverList?.[0]} alt="" className={styles.img} />
      <div className={styles.rCont}>
        <div className={styles.title}>
          <Paragraph
            ellipsis={{
              rows: 2,
              expandable: false,
            }}
            title={data?.title}
            style={{
              color: 'rgb(202, 223, 252)',
              fontSize: 20,
              fontWeight: 700,
              marginBottom: 0,
            }}
          >
            {data?.title}
          </Paragraph>
        </div>
        <div className={styles.desc}>
          <Paragraph
            ellipsis={{
              rows: 2,
              expandable: false,
              suffix:`  ${dayjs(data?.publishTime).format('YYYY-MM-DD')}`,
            }}
            title={data?.summary}
            style={{color:'rgb(140, 170, 212)',fontSize:16}}
          >
            {data?.summary}
          </Paragraph>
        </div>
      </div>
    </div>
  );
};

export default AccidentItem;
