/** @format */

import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';
const Wrapper = styled.div`
  display: flex;
  align-items: center;
  & > span {
    white-space: nowrap;
  }
`;
const Split = styled.div`
  width: 100%;
  height: 1px;
  background: rgb(176, 186, 197, 0.5);
  margin-left: 10px;
`;

interface DividerTitleProps {
  size?: Record<string, any>;
  [key: string]: any;
}

const DividerTitle = (props: DividerTitleProps) => {
  const {
    size,
    textStyle,
    text = '这是标题',
    splitColor,
    splitWidth = 1,
  } = props;

  const styleBase = {
    width: '100%',
    height: 200,
    fontSize: '26px',
    color: '#999',
  };

  const style = _.merge(styleBase, size, textStyle);

  return (
    <Wrapper style={style}>
      <span>{text}</span>
      <Split style={{ height: splitWidth, background: splitColor }} />
    </Wrapper>
  );
};

export default DividerTitle;