import {
  CheckCircleOutlined,
  CommentOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Space, Typography } from 'antd';
import { SpaceSize } from 'antd/es/space';
import moment from 'moment';

const { Text } = Typography;

interface AlarmDescriptionProps {
  alarm: MasterModel.Alarm;
  size?: SpaceSize;
}

const AlarmDescription = ({ alarm, size = 'large' }: AlarmDescriptionProps) => {
  if (!alarm?.confirmed) {
    return null;
  }

  return (
    <Space size={size} wrap>
      <Space align="baseline" size={10}>
        <CheckCircleOutlined style={{ color: '#52c41a' }} />
        <Text type="secondary" style={{ fontSize: 15 }}>
          {alarm.confirmed_time
            ? moment.unix(alarm.confirmed_time).format('YYYY-MM-DD HH:mm:ss')
            : '-'}
        </Text>
      </Space>
      <Space size={10}>
        <UserOutlined style={{ color: '#1890ff' }} />
        <Text style={{ fontSize: 15 }}>{alarm.confirmed_email}</Text>
      </Space>
      {alarm.confirmed_desc && (
        <Space size={10}>
          <CommentOutlined style={{ color: '#faad14' }} />
          <Text style={{ fontSize: 15 }}>{alarm.confirmed_desc}</Text>
        </Space>
      )}
    </Space>
  );
};

export default AlarmDescription;
