import React from 'react';
import Label from '../Label';

import styles from './style.less';

export interface InfoProps {
  className?: string;
  title: string;
}

const Info: React.FC<InfoProps> = ({
  className = '',
  title,
  children,
}) => {
  return (
    <div className={`${styles.header} ${className}`}>
      <Label className="group-title" name={title} />
      <div>
        {children}
      </div>
    </div>
  );
};

export interface InfoItemProps {
  className?: string;
  title: string | React.ReactNode;
  info: string | React.ReactNode;

  /**
   * info 内容的主色调
   */
  type?: 'normal' | 'primary' | 'secondary';
}

export const InfoItem: React.FC<InfoItemProps> = ({
  className = '',
  title,
  info,
  type = 'normal',
}) => {
  return (
    <div className={`${className} ${styles.item}`}>
      <div className="left">{title}</div>
      <div className={`right ${type}`}>{info}</div>
    </div>
  );
};

export default Info;
