import Styles from './answer-styles.scss' ; import { onSurveyAnswerState } from '@/presentation/pages/survey-result/components' ; import { SurveyResultAnswerModel } from '@/domain/models' ; import { useRecoilValue } from 'recoil' ; import React from 'react' ; type Props = { answer : SurveyResultAnswerModel ; } ; const Answer = ( { answer } ) => { const { onAnswer } = useRecoilValue ( onSurveyAnswerState ) ; const activeClassName = answer . isCurrentAccountAnswer ? Styles . active : '' ; const answerClick = ( event ) : void => { if ( event . currentTarget . classList . contains ( Styles . active ) ) { return ; } onAnswer ( answer . answer ) ; } ; return ( < li data - testid = "answer-wrap" className = { [ Styles . answerWrap , activeClassName ] . join ( ' ' ) } onClick = { answerClick } > { answer . image && < img data - testid = "image" src = { answer . image } alt = { answer . answer } / > } < span data - testid = "answer" className = { Styles . answer } > { answer . answer } < /span> < span data - testid = "percent" className = { Styles . percent } > { answer . percent } % < /span> < /li>); } ; export default Answer ;