import React from 'react';
import { Checkbox, Avatar, Button } from '@txdfe/at';
import './index.scss';

const SubjectItem = ({ data, checked, onClick, onClickArrow, multiple }) => {
  const handleClickArrow = (e) => {
    e.stopPropagation();
    if (onClickArrow) {
      onClickArrow(e);
    }
  };
  return (
    <div
      className={`uiless-member-subject-item uiless-member-subject-${data.memberType}`}
      onClick={onClick}
    >
      {multiple && (
        <Checkbox
          className="uiless-member-subject-item-checkbox"
          checked={checked}
        />
      )}
      {data.memberType === 'group' && (
        <Avatar.ImageAvatar
          className="uiless-member-subject-item-avatar"
          img={data.logo}
        />
      )}
      <div className="uiless-member-subject-item-text uiless-text-overflow">
        {data.name}
        <span>{` · ${data.enabledCount || data.memberCount || 0}`}</span>
      </div>
      <Button.Icon onClick={handleClickArrow} name="chevron-right-s" />
    </div>
  );
};

export default SubjectItem;