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

interface Props {
  heading: string;
  subHeading: React.ReactElement;
  imageElement: React.ReactElement;
}

export default function EmptyState({
  heading,
  subHeading,
  imageElement
}: Props) {
  const themeClass = useThemeClass();

  return (
    <section
      className={getActiveClasses([
        themeClass,
        "auik-block auik-max-w-md auik-mx-auto"
      ])}
    >
      <div className="auik-flex auik-justify-center">{imageElement}</div>
      <h2 className="auik-text-lg auik-text-center auik-leading-none auik-mt-8">
        {heading}
      </h2>
      <div className="auik-mt-4 auik-text-center auik-text-base">
        {subHeading}
      </div>
    </section>
  );
}