import HoverComponent from "./name"
import "./pfp.css"

function remov() {
    for (let i = 0; i < document.styleSheets.length; i++) {
        let styleSheet = document.styleSheets[i];
        let rules = styleSheet.cssRules || styleSheet.rules;
        for (let j = 0; j < rules.length; j++) {
            let rule = rules[j];
            if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-left")) {
                styleSheet.deleteRule(j);
            }
        }
    }
}

export function Bdpfp() {
    return <div onmouseenter={remov} class='header bd' >
        <div class="birthdayparent">
            <img class='birthdaypfp birthday' src="https://dp.nea.moe/avatar/712639419785412668.png" alt="LMAO IMAGINE BEING BLIND" />
            <img class='birthdayhat birthday' src="./birthday.png" alt="" />
            <HoverComponent />
        </div>
    </div>

}

export function Normalpfp() {
    return <div class="birthdayparent header normal">
        <img class="initialanim" src="https://dp.nea.moe/avatar/712639419785412668.png" alt="LMAO IMAGINE BEING BLIND" onMouseEnter={(e) => {
            (e.target as HTMLImageElement).animate([
                { transform: "rotateZ(0deg)" },
                { transform: "rotateZ(360deg)" },
            ], {
                duration: 400,
                iterations: 1,
            })
        }} onClick={(e) => {
            (e.target as HTMLImageElement).animate([
                { transform: "rotateY(0deg)" },
                { transform: "rotateY(360deg)" },
            ], {
                duration: 150,
                iterations: 1,
            })
        }} />
        <HoverComponent />
    </div>

}