import { useLingui } from "@lingui/react/macro";
import { BotAvatar } from "@rakazo/ui-web";
import {
  rosterNameClass,
  rosterPreviewClass,
  rosterRowClass,
  rosterTimeClass,
  rosterUnreadDotClass,
} from "./roster-row-style";

/** First sidebar entry in every space: the main conversation, shown as its main bot. */
export function MainConversationRow({
  name,
  botId,
  color,
  status,
  unread,
  time,
  subtitle,
  active,
  onOpen,
}: {
  name: string;
  botId: string;
  color: string;
  status?: string;
  unread: boolean;
  time: string;
  subtitle: string;
  active: boolean;
  onOpen: () => void;
}) {
  const { t } = useLingui();
  return (
    <button
      type="button"
      data-main-conversation=""
      aria-label={t`${name}, main conversation`}
      onClick={onOpen}
      className={rosterRowClass(active)}
    >
      <BotAvatar color={color} identity={botId} size={40} status={status} />
      <div className="min-w-0 flex-1">
        <div className="flex items-center justify-between gap-1.5">
          <span
            dir="auto"
            className={`truncate text-ui-body tracking-tight ${rosterNameClass(unread)}`}
          >
            {name}
          </span>
          <span className="flex shrink-0 items-center gap-1.5">
            <span className={rosterTimeClass}>{time}</span>
            {unread ? <span aria-hidden="true" className={rosterUnreadDotClass} /> : null}
          </span>
        </div>
        <div
          dir="auto"
          className={`mt-0.5 truncate text-ui-body leading-snug ${rosterPreviewClass(unread)}`}
        >
          {subtitle}
        </div>
      </div>
    </button>
  );
}