import type { ReactNode } from 'react';
import { Space, Typography } from 'antd';

/** 列表页顶栏：标题在左，主操作在右，列设置永远最右 */
export function AdminListHeader({
  title,
  description,
  actions,
  settings,
}: {
  title?: ReactNode;
  description?: ReactNode;
  actions?: ReactNode;
  settings?: ReactNode;
}) {
  return (
    <div className="admin-list-header">
      <div className="admin-list-header-left">
        {title == null || title === '' ? null : typeof title === 'string' || typeof title === 'number' ? (
          <Typography.Title level={4} style={{ margin: 0 }}>
            {title}
          </Typography.Title>
        ) : (
          title
        )}
        {description ? (
          <div className="admin-list-header-desc">{description}</div>
        ) : null}
      </div>
      <div className="admin-list-header-right">
        {actions ? <Space wrap>{actions}</Space> : null}
        {settings}
      </div>
    </div>
  );
}