import { Flex, Text } from 'theme-ui'
import { Progress } from './progress'

const getColors = (value, theme) => {
  if (value >= 90) {
    return {
      primary: '#0CCE6B',
      secondary: theme === 'dark' ? '#1F3228' : '#E7FAF0'
    }
  }

  if (value >= 50) {
    return {
      primary: '#FFA400',
      secondary: theme === 'dark' ? '#372E1E' : '#FFF6E6'
    }
  }
  return {
    primary: '#FF4E42',
    secondary: theme === 'dark' ? '#372624' : '#FFEEEC'
  }
}

export const Lighthouse = ({ value, label, theme }) => {
  return (
    <Flex
      sx={{
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <Progress value={value} {...getColors(value, theme)} />
      <Text
        sx={{
          mt: '10px',
          fontWeight: 300,
          fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
          color: theme === 'dark' ? '#F5F5F5' : '#212121',
          fontSize: '24px'
        }}
      >
        {label}
      </Text>
    </Flex>
  )
}