import { FC } from 'react'
import { Text, Box, Flex, Anchor, Button } from '../primitives'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'

type SectionTitleProps = {
  title: string
}

const SectionTitle: FC<SectionTitleProps> = ({ title }) => (
  <Text style="subtitle1" css={{ color: '$gray12', mb: 8 }}>
    {title}
  </Text>
)

type SectionLinkProps = {
  name: string
  href: string
}

const SectionLink: FC<SectionLinkProps> = ({ name, href }) => (
  <Anchor
    target="_blank"
    rel="noopener noreferrer"
    href={href}
    weight="medium"
    css={{ fontSize: 14, mt: 10 }}
  >
    {name}
  </Anchor>
)

const developerSectionLinks = [
  {
    name: 'Docs',
    href: 'https://www.pepecoin.io/',
  },
  {
    name: 'Github',
    href: 'https://github.com/memeticofficial',
  },
]

// const companySectionLinks = [
//  {
//    name: 'Terms of Use',
//    href: 'https://www.booboobaabaa.as/',
//  },
//  {
//    name: 'Privacy Policy',
//    href: 'https://www..as/',
//  },
//]

export const Footer = () => {
  return (
    <Flex
      justify="between"
      css={{
        borderTop: '1px solid $gray7',
        borderStyle: 'solid',
        position: 'relative',
        zIndex: 1,
        p: '$3',
        '@lg': {
          p: '$2',
        },
        flexDirection: 'column',
        alignItems: 'flex-start',
        gap: 20,
        '@bp600': {
          flexDirection: 'row',
          gap: 0,
        },
      }}
    >
      <Flex css={{ gap: 20, '@bp600': { gap: 100 } }}>
        <Flex direction="column">
          <SectionTitle title="Developers" />
          {developerSectionLinks.map((props) => (
            <SectionLink key={props.name} {...props} />
          ))}
      {/* </Flex>
        <Flex direction="column">
          <SectionTitle title="Company" />
          {companySectionLinks.map((props) => (
            <SectionLink key={props.name} {...props} />
          ))} */}
        </Flex>
      </Flex>
      <Flex
        direction="column"
        css={{ alignItems: 'flex-start', '@bp600': { alignItems: 'flex-end' } }}
      >
        <SectionTitle title=" *twitter*" />
        <Flex css={{ gap: '$2', mt: 8 }}>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://twitter.com/pepecoins"
          >
            <Button size="xs" color="secondary">
              <FontAwesomeIcon icon={faTwitter} width={18} height={18} />
            </Button>
          </a>
        </Flex>
      </Flex>
    </Flex>
  )
}