"use client";

import { MessageCircle } from "lucide-react";

import { CharacterAvatar } from "@/app/_components";

import styles from "./splash-latest-message.module.css";

export interface SplashLatestMessageProps {
  message: string | null;
  isLoading?: boolean;
  onOpenChat: () => void;
}

export function SplashLatestMessage({
  message,
  isLoading = false,
  onOpenChat,
}: SplashLatestMessageProps) {
  if (!isLoading && !message) return null;

  return (
    <button
      type="button"
      data-analytics-key="splash.latest_message"
      data-analytics-label="Open latest message"
      className={styles.card}
      onClick={onOpenChat}
      aria-label="Open latest message from Elio"
    >
      <span className={styles.avatarWrap}>
        <CharacterAvatar
          alt=""
          size="100%"
          imageSize={42}
          className={styles.avatar}
        />
      </span>
      <span className={styles.copy}>
        <span className={styles.eyebrow}>
          <MessageCircle size={13} aria-hidden="true" />
          Latest message
        </span>
        {isLoading ? (
          <span className={styles.messageLoading} aria-label="Loading latest message" />
        ) : (
          <span className={styles.message}>{message}</span>
        )}
      </span>
    </button>
  );
}
