import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Button, Popconfirm, Tooltip } from 'antd';
import { useState } from 'react';

/* =======================
   DeleteButton
======================= */

interface DeleteButtonProps {
  title: string;
  text: string;
  onOk: () => void | Promise<void>;
}

export const DeleteButton: React.FC<DeleteButtonProps> = ({
  title,
  text,
  onOk,
}) => {
  const [visible, setVisible] = useState<boolean>(false);

  const handleConfirm = async () => {
    await onOk();
    setVisible(false);
  };

  return (
    <Popconfirm
      title={title}
      open={visible}
      onConfirm={handleConfirm}
      onCancel={() => setVisible(false)}
    >
      <Tooltip title={text}>
        <Button
          size="small"
          danger
          type="primary"
          icon={<DeleteOutlined />}
          onClick={() => setVisible(true)}
        />
      </Tooltip>
    </Popconfirm>
  );
};

/* =======================
   EditButton
======================= */

interface EditButtonProps {
  text: string;
  onClick: () => void;
}

export const EditButton: React.FC<EditButtonProps> = ({ text, onClick }) => {
  return (
    <Tooltip title={text}>
      <Button size="small" icon={<EditOutlined />} onClick={onClick} />
    </Tooltip>
  );
};