Footer

import {
  Button,
  Footer,
  FooterDesktopNavigation,
  FooterNavigation,
  FooterNavigationItem,
  Icon,
} from 'marketing-ui'
import { IconFacebook, IconGlobe, IconInstagram, IconYoutube } from 'icons'

function Demo() {
  return (
    <Footer
      logoLink='#'
      logoLabel='Home'
      backToTopLabel='Back to top'
      desktopNavigation={
        <>
          <FooterDesktopNavigation label='Products' ariaLabel='Footer-Products'>
            <FooterNavigationItem href='#' label='Car Care' />
            <FooterNavigationItem href='#' label='Polishing' />
            <FooterNavigationItem href='#' label='Accessories' />
          </FooterDesktopNavigation>
          <FooterDesktopNavigation label='Company' ariaLabel='Footer-Company'>
            <FooterNavigationItem href='#' label='About' />
            <FooterNavigationItem href='#' label='Careers' />
            <FooterNavigationItem href='#' label='Contact' />
          </FooterDesktopNavigation>
        </>
      }
      mobileNavigation={
        <FooterNavigation label='Products'>
          <FooterNavigationItem href='#' label='Car Care' />
          <FooterNavigationItem href='#' label='Polishing' />
          <FooterNavigationItem href='#' label='Accessories' />
        </FooterNavigation>
      }
      legalLinks={
        <>
          <li>
            <a href='#'>Privacy</a>
          </li>
          <li>
            <a href='#'>Terms</a>
          </li>
          <li>
            <a href='#'>Imprint</a>
          </li>
        </>
      }
      socialLinks={
        <>
          <li>
            <Button
              aria-label='Facebook'
              variant='invert'
              iconStart={<Icon i={IconFacebook} />}
              href='#'
            />
          </li>
          <li>
            <Button
              aria-label='Instagram'
              variant='invert'
              iconStart={<Icon i={IconInstagram} />}
              href='#'
            />
          </li>
          <li>
            <Button
              aria-label='YouTube'
              variant='invert'
              iconStart={<Icon i={IconYoutube} />}
              href='#'
            />
          </li>
        </>
      }
      languageSelect={
        <Button
          variant='invert'
          iconStart={<Icon i={IconGlobe} />}
          label='English'
        />
      }
    />
  )
}

export default Demo