import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";
import { twMerge } from "tailwind-merge";

const getContrastColor = (hexColor: any) => {
  const r = parseInt(hexColor.slice(1, 3), 16);
  const g = parseInt(hexColor.slice(3, 5), 16);
  const b = parseInt(hexColor.slice(5, 7), 16);
  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
  
  return brightness > 128 ? "#000" : "#fff";
  
};

const Avatar = ({
  nome_responsavel,
  className,
  hover,
  cor_avatar_responsavel,
}: any) => {
  // const randomBackgroundColor = getRandomColor();
  let corAvatar = "";
  if (
    !cor_avatar_responsavel ||
    cor_avatar_responsavel == undefined ||
    cor_avatar_responsavel == ""
  ) {
    corAvatar = "#037bfc";
  } else {
    corAvatar = cor_avatar_responsavel;
  }
  const textColor = getContrastColor(corAvatar);
  const avatarClassName = twMerge(
    "w-8 h-8 font-medium cursor-pointer p-2 rounded-full text-xs",
    className
  );

  return (
    <>
      <HoverCard open={hover}>
        <HoverCardTrigger>
          <span
            className={avatarClassName}
            style={{
              backgroundColor: cor_avatar_responsavel,
              color: textColor,
            }}
          >
            {nome_responsavel?.substring(0, 2).toUpperCase()}
          </span>
        </HoverCardTrigger>
        <HoverCardContent className="text-center text-base px-1 py-2">
          {nome_responsavel}
        </HoverCardContent>
      </HoverCard>
    </>
  );
};

export default Avatar;