import React, { ReactElement } from 'react';
import LayoutAuthenticated from '../../layouts/Authenticated';
import { fetch } from '../../stores/expense_categories/expense_categoriesSlice';
import EntityRecordViewPage from '../../components/EntityPage/EntityRecordViewPage';

const ExpenseCategoriesView = () => (
  <EntityRecordViewPage
    singularLabel="Expense Category"
    pluralLabel="Expense Categories"
    stateKey="expense_categories"
    recordKey="expense_categories"
    fetchRecord={fetch}
    listHref="/expense_categories/expense_categories-list"
    editHref={(id) => `/expense_categories/expense_categories-edit/?id=${id ?? ''}`}
  />
);

ExpenseCategoriesView.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated permission={'READ_EXPENSE_CATEGORIES'}>{page}</LayoutAuthenticated>;
};

export default ExpenseCategoriesView;
