import { render, screen } from '@testing-library/react';
import React from 'react';

import { PromoCardContext, usePromoCardContext } from './PromoCardContext';

// A simple component that consumes the context
const TestComponent: React.FC<Record<string, never>> = () => {
  const context = usePromoCardContext();

  return (
    <div>
      <p>{`Value: ${context.state}`}</p>
      <p>{`Disabled: ${context.isDisabled.toString()}`}</p>
    </div>
  );
};

describe('PromoCardContext', () => {
  it('default values are accessible', () => {
    const contextValue = {
      state: '',
      isDisabled: false,
      onChange: jest.fn(), // You can mock this function for testing
    };

    render(
      <PromoCardContext.Provider value={contextValue}>
        <TestComponent />
      </PromoCardContext.Provider>,
    );

    expect(screen.getByText('Value:')).toBeInTheDocument();
    expect(screen.getByText('Disabled: false')).toBeInTheDocument();
  });

  it('context value changes are reflected', () => {
    const contextValue = {
      state: 'new value',
      isDisabled: true,
      onChange: jest.fn(), // You can mock this function for testing
    };

    render(
      <PromoCardContext.Provider value={contextValue}>
        <TestComponent />
      </PromoCardContext.Provider>,
    );

    expect(screen.getByText('Value: new value')).toBeInTheDocument();
    expect(screen.getByText('Disabled: true')).toBeInTheDocument();
  });
});