module Config.Helpers.Price exposing (..)

import Config.Helpers.Format exposing (headerFontSizeBig)
import Config.Style.Colour exposing (colourTheme)
import Config.Style.Glow exposing (glowDeepDarkGrey)
import Config.Style.Transitions exposing (hoverPageButtonDeepDarkOrange, transitionStyleMedium)
import Element as E exposing (..)
import Element.Background as B exposing (color)
import Element.Border as D exposing (rounded)
import Element.Font as F exposing (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
        ]
    <|
        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 ]
                }