/** @format */

import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';

const Box = styled.div`
  background-size: 100% 100%;
  color: #fff;
  font-size: 30px;
  text-align: center;
  display: flex;
  justify-content: center;

  align-items: center;
`;

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

const PlateFormTitle = (props: PlateFormTitleProps) => {
  const {
    size,
    textStyle = {},
    text = '这是标题',
    backgroundImage = 'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/6d3cb09b-eded-41ae-a81a-33497ae8adca.png',
  } = props;

  const styleBase = {
    height: 70,
    backgroundImage: `url(${backgroundImage})`,
  };

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

  return (
    <Box style={style}>
      <span>{text}</span>
    </Box>
  );
};

export default PlateFormTitle;