// Copyright 2017-2026 @pezkuwi/app-explorer authors & contributors
// SPDX-License-Identifier: Apache-2.0

import type { AugmentedBlockHeader, KeyedEvent } from '@pezkuwi/react-hooks/ctx/types';

import React from 'react';

import { Columar } from '@pezkuwi/react-components';

import BlockHeaders from './BlockHeaders.js';
import Events from './Events.js';
import Query from './Query.js';
import Summary from './Summary.js';

interface Props {
  eventCount: number;
  events: KeyedEvent[];
  headers: AugmentedBlockHeader[];
}

function Main ({ eventCount, events, headers }: Props): React.ReactElement<Props> {
  return (
    <>
      <Query />
      <Summary
        eventCount={eventCount}
        headers={headers}
      />
      <Columar>
        <Columar.Column>
          <BlockHeaders headers={headers} />
        </Columar.Column>
        <Columar.Column>
          <Events
            events={events}
            showToggle
          />
        </Columar.Column>
      </Columar>
    </>
  );
}

export default React.memo(Main);