import { mount } from '../../shared/mount';
import { EventList, Shell } from '../../shared/components';
import { parseEvents } from '../../shared/domain';
import rawFixture from '../../public/fixtures/events.json';

// The boundary is unknown even though this demonstration imports a JSON file.
const incoming: unknown = rawFixture;
function App() {
  try {
    const events = parseEvents(incoming);
    return <Shell title="Trust data after checking it"><EventList events={events} emptyMessage="No events were supplied by this fixture." /></Shell>;
  } catch (error: unknown) {
    return <Shell title="Fixture rejected"><p role="alert">
      {error instanceof Error ? error.message : 'Unknown data error.'}</p></Shell>;
  }
}
mount(<App />);