"use client";

import { useState } from "react";
import Image from "next/image";

export default function JokerLogo() {
  const [jokerActive, setJokerActive] = useState(false);

  const handleClick = () => {
    if (jokerActive) return;
    setJokerActive(true);
    setTimeout(() => {
      setJokerActive(false);
    }, 1200);
  };

  return (
    <>
      <Image
        src="/icon.png"
        alt="Logo"
        className="logo"
        width={100}
        height={100}
        onClick={handleClick}
        style={{ cursor: "pointer" }}
      />
      {jokerActive && (
        <div className="joker-flash-overlay">
          <Image src="/joker.webp" alt="Joker" className="joker-img" width={500} height={500} unoptimized />
        </div>
      )}
    </>
  );
}