import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import React from "react";
import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
import CircleIcon from "@mui/icons-material/Circle";
import { returnStatusColor } from "../../Utils";
import UserLite from "../../../../api-bodies/UserLite";
import Status from "../../Status";

interface Props {
  contactInfo: UserLite;
  setContactSelected: (contactInfo: UserLite) => void;
}

const ContactItem: React.FC<Props> = (props) => {
  return (
    <ListItemButton
      onClick={() => {
        props.setContactSelected(props.contactInfo);
      }}
    >
      <ListItemIcon>
        <PersonOutlineIcon />
      </ListItemIcon>
      <ListItemText
        primary={props.contactInfo.name}
        secondary={Status.Online}
        sx={{ flexGrow: 1 }}
      />
      <CircleIcon color={returnStatusColor(Status.Online)} />
    </ListItemButton>
  );
};

export default ContactItem;