import * as React from "react"
import styled from "styled-components"
import breakpoint from "styled-components-breakpoint"
import Jelly from "./Jelly"

const SpendJellyStyleContainer = styled.div.attrs({
  className: "SpendJelly"
})`
  min-width: ${105 - 16}px;
  border: 1px solid ${(props) => props.theme.borderGrey};
  height: 31px;
  border-radius: 5px;
  padding: 4px 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  .SpendJelly__label {
    font-size: 1rem;
    color: ${(props) => props.theme.grey};
    padding-right: 5px;

    ${breakpoint("mobile")`
      font-size: 0.9rem;
    `};

    ${breakpoint("tablet")`
      font-size: 1rem;
    `};
  }

  .SpendJelly__jelly {
    margin-right: 13px;
  }
  .SpendJelly__amount {
    font-size: 1.2rem;
    color: ${(props) => props.theme.grey};
    padding-bottom: 3px;
  }
`

export type SpendJellyButtonPropTypes = {
  price: PriceItemData
  label?: boolean
  onClick?: () => void
}

export const SpendJellyButton: React.SFC<SpendJellyButtonPropTypes> = (
  props
) => {
  const { base } = props.price
  return (
    <SpendJellyStyleContainer>
      <div className="SpendJelly__label">{base.silver && !base.gold && props.label ? "อ่านฟรีใช้" : null}</div>
      <div className="SpendJelly__jelly">
        <Jelly size={"tiny"} type={base.gold ? "gold" : "silver"} />
      </div>
      <div className="SpendJelly__amount">{base.gold || base.silver}</div>
    </SpendJellyStyleContainer>
  )
}

export default SpendJellyButton