import './styles/HeaderError.css'

interface PropsForHeaderError {
    reason: string
}

export default function HeaderError({ reason }: PropsForHeaderError) {
    const kamoji = [
        /* fishy    */ `><> .o( blub blub )`,
        /* sleepy   */ `( _ _) .zZ`,
        /* kitty!   */ `(=^'w'^=) <( meow? )`,
        /* clueless */ `(>_< ") <( eek! )`,
        /* robot    */ `&nbsp;&nbsp;\\_/<br>()o_o) <( beep! )`,
        /* bunny    */ `&nbsp;/)/)<br>( . .)&nbsp;sorry...<br>(&nbsp;づ&hearts;`,
    ]
    const face = kamoji[Math.floor(Math.random() * kamoji.length)]

    return (
        <div className="header-error">
            <span className="emote" dangerouslySetInnerHTML={{ __html: face }} />
            <span className="message" dangerouslySetInnerHTML={{ __html: reason }}></span>
        </div>
    )
}