import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { Bullseye, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';

export const TableEmptyStateError: React.FunctionComponent = () => (
  <DashboardWrapper hasPageTemplateTitle>
    <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table with error">
      <Table aria-label="Loading table demo">
        <Thead>
          <Tr>
            <Th>Repositories</Th>
            <Th>Branches</Th>
            <Th>Pull requests</Th>
            <Th>Workspaces</Th>
            <Th>Last commit</Th>
          </Tr>
        </Thead>
        <Tbody>
          <Tr>
            <Td colSpan={8}>
              <Bullseye>
                <EmptyState
                  icon={RhUiErrorFillIcon}
                  titleText="Unable to connect"
                  headingLevel="h2"
                  variant={EmptyStateVariant.sm}
                >
                  <EmptyStateBody>
                    There was an error retrieving data. Check your connection and reload the page.
                  </EmptyStateBody>
                </EmptyState>
              </Bullseye>
            </Td>
          </Tr>
        </Tbody>
      </Table>
    </PageSection>
  </DashboardWrapper>
);