import { act } from 'react';
import { describe, expect, it } from 'vitest';

import {
  ReducedMotionProvider,
  useMotionPreference,
} from './useReducedMotion';
import { render } from '../test/render';

function Probe(): JSX.Element {
  const motion = useMotionPreference();

  return (
    <button
      type="button"
      data-reduced={String(motion.reduceMotion)}
      onClick={() => motion.setPreference('reduce')}
    >
      {motion.preference}:{String(motion.reduceMotion)}
    </button>
  );
}

describe('ReducedMotionProvider', () => {
  it('allows explicit reduced-motion preference without relying on system media queries', async () => {
    const result = await render(
      <ReducedMotionProvider defaultPreference="no-preference" persist={false}>
        <Probe />
      </ReducedMotionProvider>,
    );

    const button = result.container.querySelector('button');

    expect(button?.textContent).toBe('no-preference:false');
    expect(button?.getAttribute('data-reduced')).toBe('false');

    await act(async () => {
      button?.click();
    });

    expect(button?.textContent).toBe('reduce:true');
    expect(button?.getAttribute('data-reduced')).toBe('true');

    await result.unmount();
  });
});