import { UserTablo } from "@xtablo/shared/types/tablos.types";
import { twMerge } from "tailwind-merge";

export const ChannelBadge = ({
  tablo,
  displayTitle,
  isOnline,
}: {
  tablo: UserTablo | null;
  displayTitle: string | undefined;
  isOnline: boolean;
}) => {
  const initials =
    tablo?.name?.charAt(0)?.toUpperCase() || displayTitle?.charAt(0)?.toUpperCase() || "C";

  return (
    <div className="relative">
      <div
        className={twMerge(
          "size-12 rounded-full flex items-center justify-center text-white font-semibold text-sm bg-[#804EEC]",
          tablo?.color && tablo.color
        )}
      >
        {initials}
      </div>
      {isOnline && (
        <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-900 rounded-full" />
      )}
    </div>
  );
};
