import React, { memo } from 'react';
import { areEqual } from 'Utils/equalityChecks';
import { Table, TableHeader, TableRow, Th } from 'Components/Table';
import { PurpleButton } from 'Components/Button';
import { Icon } from 'Components/Icons';

import classes from './noFormsTable.module.css';

const NoFormsTable = ({ onAdd }: { onAdd: (e) => void }) => (
  <div>
    <Table className={`table ${classes.formListWrapper}`}>
      <TableHeader>
        <TableRow>
          <Th>Address</Th>
          <Th>Date Created</Th>
          <Th />
        </TableRow>
      </TableHeader>
    </Table>
    <div className={`d-flex justify-content-center align-items-center flex-column w-100 ${classes.noFormsContent}`}>
      <Icon type="projects" />
      <p className={classes.noFormsText}>No forms yet. Create a new form.</p>
      <PurpleButton className={classes.addButton} onClick={onAdd}>
        Add +
      </PurpleButton>
    </div>
  </div>
);

const NoFormsTableMemo = memo(NoFormsTable, areEqual);

export { NoFormsTableMemo as NoFormsTable };
