import React from 'react' ; import { useActions } from 'kea' ; import { EuiCard , EuiFlexGroup , EuiFlexItem , EuiText , EuiButton } from '@elastic/eui' ; import { MANAGE_BUTTON_LABEL } from '../../../../shared/constants' ; import { SynonymsLogic } from '../index' ; import { SynonymSet } from '../types' ; import { SynonymIcon } from './' ; export const SynonymCard = ( synonymSet ) => { const { openModal } = useActions ( SynonymsLogic ) ; const [ firstSynonym , ... remainingSynonyms ] = synonymSet . synonyms ; return ( < EuiCard display = "subdued" title = { firstSynonym } titleElement = "h2" titleSize = "s" textAlign = "left" footer = { < EuiFlexGroup justifyContent = "flexEnd" > < EuiFlexItem grow = { false } > < EuiButton onClick = { ( ) => openModal ( synonymSet ) } > { MANAGE_BUTTON_LABEL } < /EuiButton> < /EuiFlexItem> < /EuiFlexGroup>}> < EuiText size = "m" > { remainingSynonyms . map ( ( synonym ) => ( < div key = { synonym } > < SynonymIcon /> {synonym} < /div>))} < /EuiText> < /EuiCard>); } ;