import type { ReactNode } from "react";
import { useI18n } from "../../i18n";
import "./AdministrationPage.css";

export function AdministrationHeader({ title, description, actions, eyebrow }: {
  title: ReactNode; description?: ReactNode; actions?: ReactNode; eyebrow?: ReactNode;
}) {
  const { t } = useI18n();
  return <header className="thot-administration-header">
    <div className="thot-administration-header__copy">
      <p className="thot-administration-eyebrow">{eyebrow ?? t("Administration")}</p>
      <h1>{title}</h1>
      {description && <p className="thot-administration-description">{description}</p>}
    </div>
    {actions && <div className="thot-administration-header__actions">{actions}</div>}
  </header>;
}