import clsx from "clsx";

import {
  LastMessagePreview,
  LastMessagePreviewProps,
} from "@/components/domains/chat";
import {
  Badge,
  Card,
  Typography,
  UserAvatar,
  UserAvatarProps,
} from "@/components/ui";

import styles from "./ChatItem.module.scss";

export interface ChatItemProps {
  userAvatar: UserAvatarProps;
  name: string;
  messagePreiew: LastMessagePreviewProps | null;
  time: string | null;
  badgeContent: number;
  className?: string;
  style?: React.CSSProperties;
  onClick?: () => void;
}

export default function ChatItem({
  userAvatar,
  name,
  messagePreiew,
  time,
  badgeContent,
  className,
  style,
  onClick,
}: ChatItemProps) {
  return (
    <Card
      className={clsx(styles.chatItem, className)}
      style={style}
      onClick={onClick}
    >
      <UserAvatar {...userAvatar} />
      <div className={styles.content}>
        <div className={styles.information}>
          <Typography weight="semiBold">{name}</Typography>
          {messagePreiew && <LastMessagePreview {...messagePreiew} />}
        </div>
        <div className={styles.meta}>
          <Typography size="sm" className={styles.time}>
            {time || ""}
          </Typography>
          {!!badgeContent && (
            <Badge className={styles.badge}>
              <Typography
                weight="medium"
                size="xs"
                color="white"
                className={styles.badgeContent}
              >
                {badgeContent > 99 ? "99+" : badgeContent}
              </Typography>
            </Badge>
          )}
        </div>
      </div>
    </Card>
  );
}
