import React from 'react';
import { Div } from 'glamorous';
const blue = "#00BCD4";
const size = 2.6;
const size_rem = `${size}rem`;
const pad = "0.5rem";
export default({
id,
number,
completed,
letter,
description,
additionalText,
scoutID,
completeAchievement,
uncompleteAchievement
}) => {
if(completed) {
const variables = {
id: completed.id
};
return
{uncompleteAchievement({variables})}}
fontSize={`${size/2}rem`}
border={`0.2rem solid ${blue}`}
display="inline-flex"
color="white"
backgroundColor={blue}
width={size_rem}
height={size_rem}
borderRadius={size_rem}
margin={pad}
cursor="pointer"
>
} else {
const variables = {
scoutID,
id,
date: (new Date(Date.now())).toISOString()
};
return {completeAchievement({variables})}}
fontSize={`${size/2}rem`}
border={`0.15rem solid ${blue}`}
display="inline-flex"
color={blue}
width={size_rem}
height={size_rem}
borderRadius={size_rem}
margin={pad}
cursor="pointer"
>
}
};