import React from 'react';
import styled from 'styled-components';
import { AvatarWText } from '../common/avatars/AvatarWText';

import { DropText } from '../dropdowns/drop';

export const ColabList = () => {
  return (
    <ColabLists>
      <ColabListItem className="d-flx-alc-jsb">
        <div>
          <AvatarWText
            image="/images/avatar1.png"
            initials="YA"
            name="Yomi Adedeji"
            email="Yomi@softcom.ng"
          />
        </div>
        <p>Owner</p>
      </ColabListItem>
      <ColabListItem className="d-flx-alc-jsb">
        <div className="">
          <AvatarWText
            image="/images/avatar1.png"
            initials="ya"
            name="Yomi Adedeji"
            email="Yomi@softcom.ng"
          />
        </div>
        <div>
          <DropText />
        </div>
      </ColabListItem>
      <ColabListItem className="d-flx-alc-jsb">
        <div className="">
          <AvatarWText
            image="/images/avatar1.png"
            initials="ya"
            name="Yomi Adedeji"
            email="Yomi@softcom.ng"
          />
        </div>
        <div>
          <DropText />
        </div>
      </ColabListItem>
      <ColabListItem className="d-flx-alc-jsb">
        <div className="">
          <AvatarWText
            image="/images/avatar1.png"
            initials="ya"
            name="Yomi Adedeji"
            email="Yomi@softcom.ng"
          />
        </div>
        <div>
          <DropText />
        </div>
      </ColabListItem>
    </ColabLists>
  );
};

const ColabLists = styled.ul``;
const ColabListItem = styled.li`
  padding: 1.5rem 0;
  border-bottom: 1px solid #e8edff;
`;
