import React from "react";
import { cn, getInitials } from "@/lib/utils";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";

export function displayContactName(name: string): string {
  return name.trim() || "Website User";
}

/** Shared fixed height for all three panel top-bar sections so bottom dividers align. */
export const PANEL_HEADER_HEIGHT = "h-[94px]";

interface ContactAvatarProps {
  name: string;
  size?: "sm" | "md" | "lg";
  className?: string;
}

export function ContactAvatar({
  name,
  size = "md",
  className,
}: ContactAvatarProps) {
  const avatarSize = size === "sm" ? "sm" : size === "lg" ? "lg" : "default";
  return (
    <Avatar size={avatarSize} className={className}>
      <AvatarFallback className="font-semibold">
        {getInitials(name)}
      </AvatarFallback>
    </Avatar>
  );
}