"use client";

/**
 * Delivery ticks for your own messages: one for sent, two for delivered, two
 * in blue for read.
 *
 * "Read" means read by everyone — the cursors behind it are the minimum across
 * the other participants, so a group only turns blue once the last member has
 * caught up.
 */

import { Check, CheckCheck } from "lucide-react";
import { cn } from "@/lib/utils";
import type { TickState } from "@/lib/chat-format";

const LABEL: Record<TickState, string> = {
  sent: "Sent",
  delivered: "Delivered",
  read: "Read by everyone",
};

export function MessageTicks({
  state,
  className,
}: {
  state: TickState;
  className?: string;
}) {
  const Icon = state === "sent" ? Check : CheckCheck;
  return (
    <Icon
      role="img"
      aria-label={LABEL[state]}
      className={cn(
        "size-3.5 shrink-0",
        state === "read" ? "text-sky-500" : "text-muted-foreground",
        className,
      )}
    />
  );
}