import Html exposing (..)
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)
import Modal


view : Modal.State -> Html Modal.Msg
view modalState =
    Modal.view
        { overlayColor = "rgba(128, 0, 128, 0.7)"
        , dismissOnEscAndOverlayClick = False
        , wrapMsg = identity
        , modalContainer =
            div
                [ style "background-color" "white"
                , style "border-radius" "4px"
                , style "border" "2px solid purple"
                , style "margin" "40px auto"
                , style "padding" "20px"
                , style "max-width" "600px"
                , style "min-height" "40vh"
                ]
        , title = ( "Intro Modal", [] )
        , content =
            div
                [ style "display" "flex"
                ]
                [ text "Welcome to this modal! I'm so happy to have you here with me."
                , button
                    (onClick Modal.close :: Modal.singleFocusableElement)
                    [ text "Close intro modal" ]
                ]
        }
        modalState