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

function DeleteDemo() {
  const { confirm } = useConfirm();
  return <button onClick={() => void confirm({ title: 'Delete attachment', message: 'Delete attachment "resume.pdf"?', confirmLabel: 'Delete', destructive: true })}>Delete attachment</button>;
}

test('destructive confirm dialog shows warning state', async () => {
  render(
    <ConfirmProvider>
      <DeleteDemo />
    </ConfirmProvider>,
  );

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

  expect(await screen.findByText(/this action may be hard to undo/i)).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /^delete$/i })).toBeInTheDocument();
});