import { useEffect, useState } from "react";
import style from "./Chats.module.css";

export default function Chats({statusCatsInside, sendMessage} : any) {
    const [catsInside, setCatsInside] = useState(statusCatsInside)
    useEffect(() => {
        setCatsInside(statusCatsInside)
    }, [statusCatsInside])

    return (
        <div>
            <h2>Chats dans la maison</h2>
            <div className={style.catsContainer}>
                <button className={style.arrow} onClick={sendMessage.bind(null, 'catEntered')}>↑</button>
                <p>{catsInside ?? ""}</p>
                <button className={style.arrow} onClick={() => {if(catsInside > 0) sendMessage('catLeft')}}>↓</button>
            </div>
        </div>
    )
}