module Config.Helpers.Cards.Inner.BuyButton exposing (buyButton)

import Config.Style.Colour.Helpers exposing (colourTheme)
import Config.Style.Fonts exposing (headerFontSizeBig)
import Config.Style.Glow exposing (glowDeepDarkGrey)
import Config.Style.Transitions exposing (hoverPageButtonDeepDarkOrange, transitionStyleMedium)
import Element as E
    exposing
        ( Element
        , centerX
        , el
        , newTabLink
        , paddingEach
        , pointer
        , row
        , text
        )
import Element.Background as B exposing (color)
import Element.Border as D exposing (rounded)
import Element.Font as F
    exposing
        ( bold
        , center
        )


buyButton : String -> String -> Element msg
buyButton price url =
    el
        [ D.width 5
        , D.rounded 30
        , centerX
        , glowDeepDarkGrey
        , D.color colourTheme.backgroundLightGrey
        , B.color colourTheme.backgroundLightGrey
        , pointer
        ]
    <|
        el
            [ B.color colourTheme.textDarkOrange
            , D.rounded 30
            , headerFontSizeBig
            , F.bold
            , transitionStyleMedium
            , hoverPageButtonDeepDarkOrange
            , paddingEach
                { top = 10
                , right = 25
                , bottom = 10
                , left = 25
                }
            ]
        <|
            newTabLink []
                { url = url
                , label =
                    row
                        [ F.center
                        , paddingEach
                            { top = 3
                            , right = 0
                            , bottom = 0
                            , left = 0
                            }
                        ]
                        [ text price ]
                }
