import React from 'react';
import Link from 'umi/link';

import styles from './style.less';

const Navigate = ({ children, to, onClick }) => {
    // to 包含协议 用 a
    const useA = (to || '').indexOf('://') > -1 ? 'a' : '';
    // 否则用 Link
    const useLink = to && to.indexOf('://') === -1 ? Link : '';
    // 没有 to 则使用 span
    const element = useA || useLink || 'span';

    const events = onClick ? { onClick } : {};
    const style = { color: '#1D74D9', cursor: 'pointer' };

    let redirect = {};
    if (useA) {
        redirect = { href: to }
    } else if (useLink) {
        redirect = { to }
    }

    const props = {
        className: 'cust-navi',
        style,
        ...redirect,
        ...events,
    }

    return React.createElement(element, props, children);
};

export default Navigate;
