import React, { memo, useEffect, useState } from "react";

import classNames from "classnames";

import css from "./SectionTitle.module.less";

export default memo(function SectionTitle({
  className,
  itemCount,
  title,
  label,
  ...rest
}) {
  return (
    <h2
      className={classNames(css.sectionTitle, className)}
      aria-label={label ? label : title}
      tabIndex={-1}
      aria-live="polite"
      aria-atomic="true"
      {...rest}
    >
      {title}
      {itemCount && <span>({itemCount})</span>}
    </h2>
  );
});
