import { Box, ListItem, ListItemIcon, ListItemText } from "@mui/material";
import {
  ChatUserName,
  LastSendMessage,
  LastSendMessageText,
} from "../../style";
import { formatRelativeDate } from "@/components/common/common";
import React from "react";
import Avatar from "react-avatar";
import UserBadge from "../../common/components/user-badge";
import { ListItemProps } from "@/hooks/Interface";

const RenderSearchUserList: React.FC<ListItemProps> = React.memo(
  ({ item, onClick }) => {
    return (
      <ListItem
        sx={{
          "&:hover": {
            "& .doticon": {
              visibility: "visible",
            },
          },
          "@media (max-width: 767px)": {
            "& .doticon": {
              visibility: "visible",
            },
          },
        }}
        key={item?.id}
        onClick={onClick}
      >
        {item?.avatar_original && (
          <ListItemIcon>
            <UserBadge user={item} status={item?.online} showTooltip={true} />
          </ListItemIcon>
        )}
        <ListItemText>
          <ChatUserName>
            <div>{item?.user_name ? item?.user_name : item?.name}</div>
            <span>{formatRelativeDate(item?.created_at, true)}</span>
          </ChatUserName>
          <LastSendMessage>
            <LastSendMessageText>{item?.message}</LastSendMessageText>
          </LastSendMessage>
        </ListItemText>
      </ListItem>
    );
  }
);

export default RenderSearchUserList;