Codewalkers/apps/web/src/components/MessageCard.tsx

import { Card } from "@/components/ui/card";
import { cn, formatRelativeTime } from "@/lib/utils";

interface MessageCardProps {
  agentName: string;
  agentStatus: string;
  preview: string;
  timestamp: string;
  requiresResponse: boolean;
  isSelected: boolean;
  onClick: () => void;
}

function formatStatusLabel(status: string): string {
  return status.replace(/_/g, " ");
}

function truncatePreview(text: string, maxLength = 80): string {
  if (text.length <= maxLength) return text;
  return text.slice(0, maxLength) + "...";
}

export function MessageCard({
  agentName,
  agentStatus,
  preview,
  timestamp,
  requiresResponse,
  isSelected,
  onClick,
}: MessageCardProps) {
  return (
    <Card
      className={cn(
        "cursor-pointer p-4 transition-colors hover:bg-accent/50",
        isSelected && "bg-accent",
      )}
      onClick={onClick}
    >
      <div className="flex items-start justify-between gap-4">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <span
              className={cn(
                "text-sm",
                requiresResponse ? "text-status-warning-dot" : "text-muted-foreground",
              )}
            >
              {requiresResponse ? "\u25CF" : "\u25CB"}
            </span>
            <span className="text-sm font-bold">
              {agentName}{" "}
              <span className="font-normal text-muted-foreground">
                ({formatStatusLabel(agentStatus)})
              </span>
            </span>
          </div>
          <p className="mt-1 pl-5 text-sm text-muted-foreground">
            &ldquo;{truncatePreview(preview)}&rdquo;
          </p>
        </div>
        <span className="shrink-0 text-xs text-muted-foreground">
          {formatRelativeTime(timestamp)}
        </span>
      </div>
    </Card>
  );
}