import { useId } from "react";
import type { UiModuleBlock } from "../types";
import { ModuleCard } from "./ModuleCard";

export interface DashboardHeaderProps {
  title: string;
  subtitle?: string;
  eyebrow?: string;
  module?: UiModuleBlock;
}

export function DashboardHeader({
  title,
  subtitle,
  eyebrow,
  module,
}: DashboardHeaderProps) {
  const titleId = useId();

  return (
    <header className="dashboard-header" aria-labelledby={titleId}>
      <div>
        {eyebrow ? <p>{eyebrow}</p> : null}
        <h1 id={titleId}>{title}</h1>
        {subtitle ? <span>{subtitle}</span> : null}
      </div>
      {module ? <ModuleCard module={module} /> : null}
    </header>
  );
}