import React from 'react';
import '@testing-library/jest-dom';
import { render, screen, fireEvent } from '@testing-library/react';
import { ConfirmProvider, useConfirm } from './confirm';

function Demo() {
  const { confirm } = useConfirm();
  return (
    <button onClick={() => void confirm({ title: 'Delete job', message: 'Are you sure?', confirmLabel: 'Delete', destructive: true })}>
      Open confirm
    </button>
  );
}

test('renders app-owned confirmation dialog', async () => {
  render(
    <ConfirmProvider>
      <Demo />
    </ConfirmProvider>,
  );

  fireEvent.click(screen.getByRole('button', { name: /open confirm/i }));

  expect(await screen.findByText(/are you sure/i)).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
});