import style from "./TextObjectFilterItem.module.css";
import Avatar from "@components/Avatar/Avatar";
import { useTextObjectModalStore } from "@store/TextObjectModal.Store";
import { TextObjectFilterResult } from "@models/TextObjectFilter.model";

interface TextObjectFilterItemProps {
    style?: React.CSSProperties;
    data: TextObjectFilterResult;
}

export default function CollaboratorItem(props: TextObjectFilterItemProps): React.ReactElement {
    const modal = useTextObjectModalStore();
    return (
        <>
            <div
                className={style.textObjectFilterItemContainer}
                style={props.style}
                onClick={() => {
                    modal.onSelected(props.data);
                }}
            >
                {props.data.image && (
                    <Avatar
                        name={props.data.name}
                        size="super-small"
                        border="none"
                        src={props.data.image}
                        alt={props.data.name}
                    />
                )}

                <div className={style.textObjectFilterInfo}>
                    <h1>{props.data.name}</h1>
                    <h4>{props.data.description}</h4>
                </div>
            </div>
        </>
    );
}
