import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';

export default ({ url , name , column , login })=>{
  const Img = styled.span`
    display:flex;
    ${column && "flex-direction: column;text-align:center;"}
    align-items: center;
    & img{
      width:30px;
      height:30px;
      border-radius:50%;
    }
    ${!column && `
      & span{
        margin-left:8px;
      }`
    }
  `;
  return(
    <Link to={`/accounts/${login}`}>
      <Img>
        <img src={url} alt=""/>
        <span className="task-hide" style={{maxWidth:"84px",textAlign:"center"}}>{name}</span>
      </Img>
    </Link>
  )
}