import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd-mobile';

export class Block extends Component {
  render() {
    const { className = '', children } = this.props;
    return <div className={`g-block ${className}`}>{children}</div>;
  }
}
export class TopBlock extends Component {
  render() {
    const { className = '', theme = 'default', children } = this.props;
    return <div className={`g-top-block ${className} ${theme}`}>{children}</div>;
  }
}

export class TagBlock extends Component {
  render() {
    const { className = '', theme = 'default', tag, children } = this.props;
    return (
      <div className={`g-tag-block ${className} ${theme}`}>
        <div className="g-tag-block-tag">{tag}</div>
        {children}
      </div>
    );
  }
}

export class LinkBlock extends Component {
  render() {
    const { className = '', theme = 'default', title, sub } = this.props;
    return (
      <div className={`g-link-block ${className} ${theme}`}>
        <div className="g-link-block-title">{title}</div>
        <div className="g-link-block-sub">{sub}</div>
        <div className="g-link-block-icon">
          <Icon type="right" size="xxs" color="#fff" />
        </div>
      </div>
    );
  }
}