import React from 'react';
import { UserOutlined } from '@ant-design/icons';

type RenderTupe = {
  title: string | React.ReactNode;
  subTitle?: string | React.ReactNode | null;
  icon: React.ReactNode;
  style?: React.CSSProperties;
  height: number;
  button?: React.ReactNode;
};

const defaultRenderTupe: RenderTupe = {
  title: '',
  subTitle: '',
  icon: null,
  style: {},
  height: 60,
  button: null,
};
const renderTitle = (params: RenderTupe = defaultRenderTupe) => {
  return (
    <div style={{
      ...params.style,
      display: 'flex', alignItems: 'center', justifyContent: 'center', height: params.height
    }}>
      {params.icon}
      <div style={{ flex: 10, marginLeft: 10 }}>
        {
          params.title instanceof String ? <strong>{params.title}</strong> : params.title
        }
        <div style={{ fontSize: 12, opacity: 0.7 }}>{params.subTitle}</div>
      </div>
      <div style={{ flex: 1 }}>
        {
          params.button
        }
      </div>
    </div>
  );
};

export default renderTitle;