import React, { type ReactElement } from 'react';
import { useReactiveVar } from '@apollo/client';
import { bottomSheetHeaderAppliedFilters } from '../../apollo/reactive-vars';
import HeaderTitle from './HeaderTitle';
import type { HeaderTitleProps } from './types';

interface HeaderTitleWithFilterCountProps extends HeaderTitleProps {
    activeRouteName: string;
}

const HeaderTitleWithFilterCount = ({
    activeRouteName,
    ...headerTitleProps
}: HeaderTitleWithFilterCountProps): ReactElement => {
    const filters = useReactiveVar(bottomSheetHeaderAppliedFilters);

    return (
        <HeaderTitle
            {...headerTitleProps}
            appliedFiltersCount={filters[activeRouteName]?.length || 0}
        />
    );
};

export default HeaderTitleWithFilterCount;