Footer

const MyFooter = () => {
  const myActionHandler = action => {
    alert('action handler')
  }
  const footerActionObject = {
    type: 'EXTERNAL',
    url: 'https://appfire.com',
    label: 'Footer action object',
    tracking: {
      destination: 'some-destination-string',
      type: 'link'
    }
  }
  const footerData = {
    productCard: {
      title: 'Product resources and support',
      caption: 'Check out these resources for additional information:',
      actions: [
        {...footerActionObject, label: 'Troubleshooting'},
        {...footerActionObject, label: 'System status'},
        {...footerActionObject, label: 'User guide'},
        {...footerActionObject, label: 'Documentation'},
        {...footerActionObject, label: 'Support request'}
      ]
    },
    feedbackCard: {
      title: `We'd love your feedback!`,
      caption:
        "If you're enjoying these features, please consider sharing your experience in a 4-star review on the Marketplace.",
      actions: [{...footerActionObject, label: 'Write a review'}]
    },
    customerCard: {
      title: 'Stay connected',
      caption:
        'Thank you for supporting us! We sincerely appreciate everything you do; you truly are the reason we build great software!',
      actions: [
        {...footerActionObject, label: 'Submit feature request'},
        {...footerActionObject, label: 'Subscribe to product updates'},
        {...footerActionObject, label: 'Read our blog'}
      ]
    }
  }

  const navItems = {
    navItemOne: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'Atlassian Community',
      tracking: {
        destination: 'some-destination-string',
        type: 'link'
      }
    },
    navItemTwo: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'Knowledge base',
      tracking: {
        destination: 'some-destination-string',
        type: 'link'
      }
    },
    navItemThree: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'View documentation',
      tracking: {
        destination: 'some-destination-string',
        type: 'button'
      }
    },
    navItemFour: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'Support request',
      tracking: {
        destination: 'some-destination-string',
        type: 'link'
      }
    }
  }

  const {productCard, feedbackCard, customerCard} = footerData
  const {navItemOne, navItemTwo, navItemThree, navItemFour} = navItems
  return (
    <FooterSection>
      <FooterTitle
        solidText="We're here and"
        gradientText="ready to answer all of your questions"
        gradientTo="#ec4899"
        gradientFrom="#a855f7"
      />

      <FooterCardGrid>
        <FooterCard
          title={productCard.title}
          caption={productCard.caption}
          actions={productCard.actions}
          actionHandler={myActionHandler}
        />
        <FooterCard
          title={feedbackCard.title}
          caption={feedbackCard.caption}
          actions={feedbackCard.actions}
          actionHandler={myActionHandler}
        />
        <FooterCard
          title={customerCard.title}
          caption={customerCard.caption}
          actions={customerCard.actions}
          actionHandler={myActionHandler}
        />
      </FooterCardGrid>
      <FooterNav.Wrapper>
        <FooterNav.Logo />
        <FooterNav>
          <FooterNav.Item {...navItemOne} href={navItemOne.url} onClick={() => myActionHandler(navItemOne)}>
            {navItemOne.label}
          </FooterNav.Item>
          <FooterNav.Item {...navItemTwo} href={navItemTwo.url} onClick={() => myActionHandler(navItemTwo)}>
            {navItemTwo.label}
          </FooterNav.Item>
          <FooterNav.Item {...navItemThree} href={navItemThree.url} onClick={() => myActionHandler(navItemThree)}>
            Documentation
          </FooterNav.Item>
          <FooterNav.Item {...navItemFour} href={navItemFour.url} onClick={() => myActionHandler(navItemFour)}>
            {navItemFour.label}
          </FooterNav.Item>
        </FooterNav>
        <FooterNav.Copyright />
      </FooterNav.Wrapper>
    </FooterSection>
  )
}

render(<MyFooter />)