import { Typography } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import SafetyModal from '../SafetyModal';
import styles from './index.less';

const { Paragraph } = Typography;

const SafetyTipItem = ({ data }: { data: any }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <div className={styles.container} onClick={showModal}>
        <div className={styles.leftWarp}>
          <div className={styles.dot}></div>
          <div className={styles.title}>
            <Paragraph
              ellipsis={{
                rows: 2,
                expandable: false,
                suffix: ' ' + dayjs(data?.publishTime).format('YYYY-MM-DD'),
              }}
              title={data?.title}
              style={{ color: 'rgb(202, 223, 252)', fontWeight: 500 }}
            >
              {data?.title}
            </Paragraph>
          </div>
        </div>
        <img src={data?.coverList?.[0]} alt="" className={styles.icon} />
      </div>

      <SafetyModal data={data} open={isModalOpen} onCancel={handleCancel} />
    </>
  );
};

export default SafetyTipItem;
