import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';

import { FooterSeparator, Body } from '../../atoms';
import { Footer } from './Footer';
import { FooterAbout } from './FooterAbout';
import { FooterDonateAndSubscribe } from './FooterDonateAndSubscribe';
import { FooterLinkColumn, FooterLinks, FooterLink } from './FooterLinks';

<Meta
  title="organisms/Footer"
  component={Footer}
  parameters={{ actions: { argTypesRegex: '^on.*' } }}
/>

export const FOOTER_LINK_COLUMNS = [
  {
    heading: 'Company',
    links: [
      {
        title: 'Help & Support',
        url: 'https://support.mycrypto.com/'
      },
      {
        title: 'Our Team',
        url: '/about',
        internal: true
      },
      {
        title: 'Press',
        url: 'mailto://press@mycrypto.com'
      },
      {
        title: 'Privacy Policy',
        url: '/privacy',
        internal: true
      },
      {
        title: 'Jobs',
        url: '/jobs',
        internal: true
      },
      {
        title: 'Security',
        url: '/security',
        internal: true
      }
    ]
  },
  {
    heading: 'Support Us',
    links: [
      {
        title: 'Get a Ledger',
        url: 'https://www.ledgerwallet.com/r/1985?path=/products/'
      },
      {
        title: 'Get a Trezor',
        url: 'https://shop.trezor.io/?offer_id=10&aff_id=1735'
      },
      {
        title: 'Get QuikNode',
        url: 'https://quiknode.io?tap_a=67226-09396e&tap_s=860550-6c3251'
      },
      {
        title: 'Buy ETH on Coinbase',
        url: 'https://coinbase-consumer.sjv.io/RVmkN'
      },
      {
        title: 'Unstoppable Domains',
        url: 'https://unstoppabledomains.com/r/mycrypto'
      }
    ]
  },
  {
    heading: 'Other Products',
    links: [
      {
        title: 'EtherAddressLookup',
        url:
          'https://chrome.google.com/webstore/detail/etheraddresslookup/pdknmigbbbhmllnmgdfalmedcmcefdfn'
      },
      {
        title: 'CryptoScamDB',
        url: 'https://cryptoscamdb.org/'
      },
      {
        title: 'FindETH',
        url: 'https://findeth.io/'
      },
      {
        title: 'MoneroVision',
        url: 'https://monerovision.com/'
      }
    ]
  }
];

# Footer

The MyCrypto footer used across different products.

<Canvas>
  <Story name="Default">
    {(props) => (
      <Footer {...props}>
        <FooterAbout />
        <FooterSeparator order={1} />
        <FooterLinks>
          {FOOTER_LINK_COLUMNS.map((column) => (
            <FooterLinkColumn heading={column.heading}>
              {column.links.map((link, index) => (
                <FooterLink key={index}>
                  <Body as="a" href={link.url} color="inherit" sx={{ textDecoration: 'none' }}>
                    {link.title}
                  </Body>
                </FooterLink>
              ))}
            </FooterLinkColumn>
          ))}
        </FooterLinks>
        <FooterSeparator order={3} />
        <FooterDonateAndSubscribe listId="foo" tag="bar" />
      </Footer>
    )}
  </Story>
</Canvas>