import { Divider } from 'antd';
import type { ReactNode } from 'react';
import './app-divider-bar.css';

// House section divider bar. Wraps AntD <Divider> with the module's spacing contract and an
// optional title + trailing action group, so stacked sections on a page are separated
// consistently. Built on the same divider convention as AppActionBar (mt-0 / mb-2 margins).
//
//   title       — optional section label rendered on the divider line.
//   orientation — where the title sits ('left' | 'center' | 'right'). Default 'left'.
//   children    — optional trailing actions (buttons/links) aligned to the right of the bar.
type AppDividerBarProps = {
  title?: ReactNode;
  orientation?: 'left' | 'center' | 'right';
  children?: ReactNode;
};

const AppDividerBar = ({ title, orientation = 'left', children }: AppDividerBarProps) =>
  children ? (
    <div className="app-divider-bar">
      <Divider orientation={orientation} className="mt-0 mb-0 app-divider-bar__rule">
        {title}
      </Divider>
      <div className="app-divider-bar__actions">{children}</div>
    </div>
  ) : (
    <Divider orientation={orientation} className="mt-0 mb-2">
      {title}
    </Divider>
  );

export default AppDividerBar;