Footer

import {
  Button,
  Footer,
  FooterDesktopNavigation,
  FooterNavigation,
  FooterNavigationItem,
  Icon,
  PlainButton,
} 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>
            <PlainButton
              aria-label="Facebook"
              variant="dark"
              iconStart={<Icon i={IconFacebook} />}
              href="#"
            />
          </li>
          <li>
            <PlainButton
              aria-label="Instagram"
              variant="dark"
              iconStart={<Icon i={IconInstagram} />}
              href="#"
            />
          </li>
          <li>
            <PlainButton
              aria-label="YouTube"
              variant="dark"
              iconStart={<Icon i={IconYoutube} />}
              href="#"
            />
          </li>
        </>
      }
      languageSelect={
        <Button
          variant="invert"
          iconStart={<Icon i={IconGlobe} />}
          label="English"
        />
      }
    />
  );
}

export default Demo;