import React, { Component } from 'react';
import { Link } from 'react-router';
import { isAlibaba } from '../../utils';

// const DARK =
// 'https://gw.alicdn.com/tfs/TB1KmB6nntYBeNjy1XdXXXXyVXa-224-60.png';

const DARK = 'https://gw.alicdn.com/tfs/TB1KmB6nntYBeNjy1XdXXXXyVXa-224-60.png';
const LIGHT =
  'https://img.alicdn.com/tfs/TB1saOBbYGYBuNjy0FoXXciBFXa-218-58.png';

export default class Logo extends Component {
  render() {
    const { isDark } = this.props;
    const LOGO = isDark ? DARK : LIGHT;
    const { style } = this.props;

    return (
      <div
        className="logo"
        style={{
          height: 32,
          color: '#f40',
          textAlign: 'left',
          ...style,
        }}
      >
        <Link
          to={window.routePrefix || '/'}
          style={{ display: 'block', position: 'relative' }}
        >
          <img src={LOGO} width="129" height="35" />
        </Link>
      </div>
    );
  }
}

const styles = {
  betaTag: {
    position: 'absolute',
    top: '-4px',
    right: '-40px',
    textDecoration: 'none',
    background: '#fff',
    fontSize: '12px',
    borderRadius: '6px',
    padding: '1px 3px',
    color: 'rgba(255,255,255,0.7)',
  },
};