import { Button, Flex, Box, Image, Stack, Text, Tag, Heading, } from '@chakra-ui/react' import { AddIcon } from '@chakra-ui/icons' import { gql, useMutation } from '@apollo/client' const PODCAST_SUBSCRIBE = gql` mutation podcastSubscribe($itunesID: String!) { subscribeToPodcast(itunesId: $itunesID) { title itunesId } } ` const Podcast = ({ podcast }) => { const { title, itunesId, description, artwork, categories } = podcast const [subscribeMutation, { data }] = useMutation(PODCAST_SUBSCRIBE) return ( <Flex rounded="lg" borderWidth="2px" m={4}> <Box width="200px"> <Image src={artwork} boxSize="200px" /> <Button width="100%" onClick={() => subscribeMutation({ variables: { itunesID: itunesId } }) } > <AddIcon /> </Button> </Box> <Box m={4} maxWidth="300px"> <Heading noOfLines={2}>{title}</Heading> <Text noOfLines={3}>{description}</Text> <Stack isInline> {categories.slice(0, 3).map((c) => { return <Tag key={c}>{c}</Tag> })} </Stack> </Box> </Flex> ) } export default Podcast