import { Text, Box, Tooltip, HStack, CheckBox, } from '../../../themes/components';
import React, { useContext, } from 'react';
import borderRadius from '../../../themes/foundations/borderRadius';
import { ThemeContext } from 'styled-components';
import UserAvatar from 'react-native-user-avatar';
export default function PollOptionView({ option, index, active, selfId, onChange, }) {
    const { colors } = useContext(ThemeContext);
    const selfVote = option.votes.find((v) => v.id === selfId);
    return (<Box bg={selfVote ? 'primary.500' : 'secondary.700'} borderRadius={borderRadius.medium} p={6}>
			<HStack px={1} align="center" mr={6}>
				<CheckBox style={{
        paddingRight: 10, height: 30, justifyContent: 'center', borderRadius: borderRadius.small,
    }} checkedCheckBoxColor="white" uncheckedCheckBoxColor="white" isChecked={!!selfVote} onClick={onChange}/>
				<Text textAlign="center">{option.text}</Text>
				{option.count !== null && <Text>{`(${option.count})`}</Text>}
			</HStack>
			<HStack mt={1}>
				{option.votes.map((vote, index) => (<Tooltip label={vote.name}>
						<UserAvatar style={{ marginRight: 5, marginTop: 5, marginBottom: 5 }} bgColor={selfVote ? colors.secondary['700'] : colors.primary['500']} color={colors.textPrimary['100']} name={vote.name}/>
					</Tooltip>))}
			</HStack>
		</Box>);
}
//# sourceMappingURL=PollsOptions.js.map