import { useEffect } from "preact/hooks";
import { cn } from "@/lib/utils";

const CHARACTER_IDLE_SRC = "/character-idle.gif";
const CHARACTER_BUSY_SRC = "/character-busy.gif";

type SybilCharacterProps = {
  className?: string;
  isBusy?: boolean;
};

export function SybilCharacter({ className, isBusy = false }: SybilCharacterProps) {
  useEffect(() => {
    const busyImage = new Image();
    busyImage.src = CHARACTER_BUSY_SRC;
  }, []);

  return (
    <img
      aria-hidden="true"
      alt=""
      className={cn(
        "aspect-square rounded-xl border border-violet-200/24 bg-white/6 object-cover p-1 shadow-[inset_0_1px_0_hsl(252_90%_86%/0.12),0_10px_24px_hsl(240_80%_2%/0.3)]",
        className
      )}
      data-state={isBusy ? "busy" : "idle"}
      draggable={false}
      src={isBusy ? CHARACTER_BUSY_SRC : CHARACTER_IDLE_SRC}
    />
  );
}