import { useMemo } from 'react';
import PageTitle from '../components/PageTitle';
import { useAppSelector } from '../store/store';
import { CompanyGroupsTable } from '../widgets/CatalogueCompanyGroup/CompanyGroupsTable/CompanyGroupsTable';

export function GroupsLayout() {
	const totalGroupsNum = useAppSelector((state) => state.company_groups.total_groups);
	const desc = useMemo(() => {
		return `${totalGroupsNum} групп компаний`;
	}, [totalGroupsNum]);
	return (
		<div
			style={{
				padding: 12,
				display: 'flex',
				flexDirection: 'column',
				height: '100vh',
			}}>
			<PageTitle header='Группы компаний' location='Отчётность>Группы компаний' description={desc} />
			<main
				style={{
					flex: '1 1 auto',
					minHeight: 0,
					overflow: 'auto',
					backgroundColor: 'white',
					borderRadius: 12,
				}}>
				<CompanyGroupsTable />
			</main>
		</div>
	);
}