// src/UserMessage.jsx
import React from "react";

export default function UserMessage({ content, theme, timestamp }) {
  return (
    <div className="mb-2 d-flex flex-column align-items-end">
      <div
        className={`p-2 rounded ${theme.userBg}`}
        style={{
          maxWidth: "95%",
          textAlign: "left", // ensures text inside is left-aligned
        }}
      >
        <pre
          className="m-0 p-0"
          style={{
            whiteSpace: "pre-wrap",
            fontFamily: "inherit",
            backgroundColor: "transparent",
            color: "inherit",
          }}
        >
          {content}
        </pre>
      </div>
      {timestamp && (
        <div
          style={{
            fontSize: "0.75rem",
            color: "#666",
            marginTop: "0.2rem",
            marginRight: "0.25rem"
          }}
        >
          {formatDateTime(timestamp)}
        </div>
      )}
    </div>
  );
}

// Same helper used in AssistantMessage
function formatDateTime(dateTime) {
  try {
    const date = new Date(dateTime);
    return date.toLocaleString(undefined, {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit"
    });
  } catch {
    return dateTime;
  }
}