"use client";

import React from "react";

interface PageTitleBarProps {
  title: React.ReactNode;
  actions?: React.ReactNode;
  className?: string;
}

/**
 * Consistent title bar for all pages: same look (left accent, background, typography).
 * Use for the main page heading so every menu destination has the same title style.
 */
const PageTitleBar: React.FC<PageTitleBarProps> = ({
  title,
  actions,
  className = "",
}) => {
  return (
    <div
      className={
        "flex flex-col gap-4 rounded-lg border border-slate-200 border-l-4 border-l-blue-500 bg-white px-4 py-3 shadow-sm dark:border-slate-700 dark:bg-slate-800 sm:flex-row sm:items-center sm:justify-between " +
        className
      }
    >
      <h1 className="text-xl font-bold text-slate-900 sm:text-2xl dark:text-slate-100">
        {title}
      </h1>
      {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
    </div>
  );
};

export default PageTitleBar;
