import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

import { UserType } from './Types';

export function Friends({ visitor, ...rest }) {
    return <Users data={visitor.read || []} />;
}

export function Readers({ visitor, ...rest }) {
    return <Users data={ visitor.readers || [] } />;
}

function Users({data, ...rest}) {
    return (
        <div className="users">
            {
                data.map(user => <span key={user.uid}>
                        <Link to={`/${user.uname}/`}>
                        <img src={`//i.juick.com/as/${user.uid}.png`} />
                        <span>{user.uname}</span>
                        </Link>
                    </span>)
            }
        </div>
    );
}


Friends.propTypes = {
    visitor: UserType
};

Readers.propTypes = {
    visitor: UserType
};

Users.propTypes = {
    data: PropTypes.arrayOf(UserType).isRequired
};