import { CompanyEmployeesView } from "@core/Models/Collaborators.model";
import style from "./CollaboratorItem.module.css";
import Avatar from "@components/Avatar/Avatar";

interface CollaboratorItemProps {
    style?: React.CSSProperties;
    data: CompanyEmployeesView;
    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
}

export default function CollaboratorItem(props: CollaboratorItemProps): React.ReactElement {
    const getRolName = (rol: string) => {
        if (rol === "admin") {
            return "Admin";
        } else if (rol === "owner") {
            return "Dueño";
        } else if (rol === "employee") {
            return "Colaborador";
        }
        return "Colaborador";
    };
    return (
        <>
            <div
                className={style.collaboratorItemContainer}
                style={props.style}
                onClick={props.onClick}
            >
                <Avatar
                    name={props.data.fullName}
                    size="medium"
                    border="none"
                    src={props.data.avatar}
                    alt={props.data.fullName}
                />
                <div className={style.collaboratorInfo}>
                    <h1>{props.data.fullName}</h1>
                    <h4>{props.data.email}</h4>
                    <ul>
                        {props.data.roles.map((rol) => (
                            <li key={"rol." + rol}>{getRolName(rol)}</li>
                        ))}
                        {!props.data.fullOk && (
                            <li className={style.collaboratorPending}>Pendiente</li>
                        )}
                    </ul>
                </div>
            </div>
        </>
    );
}
