import * as React from 'react'
import styled from '@emotion/styled'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSync } from '@fortawesome/free-solid-svg-icons'

import { getColor } from '../../theme/selectors'

type RefreshButtonProps = {}

const OutterBorder = styled.div`
  border: 0.18rem solid ${getColor('white')};
  background-color: ${getColor('darkGrey')};
  padding: 0.5rem;
  border-radius: 50%;
  width: 8rem;
  height: 8rem;
`

const InnerBorder = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ${getColor('lightGrey')};
  color: white;
  font-size: 1.25rem;
  border: 0.5rem solid ${getColor('white')};
  border-radius: 50%;
  width: 100%;
  height: 100%;
`

export const RefreshButton = () => {
  return (
    <OutterBorder>
      <InnerBorder>
        <FontAwesomeIcon icon={faSync} size="sm" />
      </InnerBorder>
    </OutterBorder>
  )
}