import React, { FC } from 'react';

// Antd
import { Button } from 'antd';

// Types
import { TypeStatusWithButtonUuid } from './types';

// Styles
import styles from './StatusWithButtonUuid.module.scss';

const StatusWithButtonUuid: FC<TypeStatusWithButtonUuid> = ({
  loading = false,
  category,
  uuid,
  handleOpenIncidentInfo,
}) => {
  const handleClick = (e: React.MouseEvent<HTMLElement>): void => {
    e.stopPropagation();
    handleOpenIncidentInfo();
  };
  return (
    <div>
      <span className={styles['title']}>{category}</span>
      {!loading && (
        <Button type="link" className={styles['link']} onClick={handleClick}>
          № {uuid}
        </Button>
      )}
    </div>
  );
};

export default StatusWithButtonUuid;
