import React from "react";
import Heading from "../Typography/Heading";
import { useThemeClass } from "../Theme";
import { getActiveClasses } from "../utility/active-classes";

interface Props {
  heading: string;
  children: React.ReactNode;
  className?: string;
}

export default function ListGroupedContainer({
  heading,
  children,
  className
}: Props) {
  const themeClass = useThemeClass();

  return (
    <section
      className={getActiveClasses([themeClass, { [className]: !!className }])}
    >
      <Heading as={"h2"}>{heading}</Heading>
      <ul className="auik-ml-2">{children}</ul>
    </section>
  );
}