import { type Component } from "solid-js";
import { IAnnouncementModalViewProps } from "./types";
import { state } from "../../store/state";

const AnnouncementModalView: Component<IAnnouncementModalViewProps> = (
    props: IAnnouncementModalViewProps,
) => {
    return (
        <div>
            <dialog
                ref={props.dialogRef}
                class="modal outline-none bg-[#00000050]"
            >
                <div class="modal-box bg-stone-950 rounded-3xl">
                    <h3 class="text-lg font-bold text-center">
                        {state.app.announcement.title}
                    </h3>
                    <div class="divider"></div>
                    <p>{state.app.announcement.text}</p>
                </div>
                <form
                    onClick={props.onClose}
                    method="dialog"
                    class="modal-backdrop"
                ></form>
            </dialog>
        </div>
    );
};

export default AnnouncementModalView;