import * as React from 'react'
import Link from 'next/link'
import { InputGroup, Input, Nav, Footer, Button, Stack, Divider } from 'rsuite'
import { SocialIcon } from 'react-social-icons';


const footerColumns = [
  {
    title: 'Company',
    links: [
      {label: 'About', href: '/about'},
      {label: 'Blog', href: '/blog'},
      {label: 'Contact', href: '/contact'},
    ]
  },

  {
    title: 'Product',
    links: [
      {label: 'Features', href: '/features'},
      {label: 'Pricing', href: '/pricing'},
      {label: 'Integrations', href: '/integrations'},
    ]
  },

  {
    title: 'Resources',
    links: [
      {label: 'Help Center', href: '/help-center'},
      {label: 'Guides', href: '/guides'},
      {label: 'API Reference', href: '/api-reference'},
    ]
  },
]


interface FooterColumnProps {
  title: string
  links: {label: string, href: string}[]
}

const FooterColumn: React.FC<FooterColumnProps> = ({title, links}) => {
  return (
    <Stack direction='column' alignItems='stretch' spacing={12}>
      <strong>{title}</strong>

      <Stack direction='column' alignItems='flex-start' spacing={12}>
        {links.map((link, index) => (
          <Link key={index} href={link.href}>
            {link.label}
          </Link>
        ))}
      </Stack>
    </Stack>
  )
}

const FooterNewsletter: React.FC = () => {
  return (
    <Stack direction='column' alignItems='stretch' spacing={8}>
      <strong>Subscribe to our news letter</strong>
      <InputGroup style={{ width: 300, marginBottom: 10 }}>
        <InputGroup.Addon> @</InputGroup.Addon>
        <Input />
      </InputGroup>
      <Button block appearance='primary'>
        Subscribe
      </Button>
    </Stack>
  )
}

const MainFooter: React.FC = () => {
  return (
    <Footer
      style={{
        paddingTop: 128,
        paddingInline: 128,
        paddingBottom: 32,
        background: "#F7F7FA",
        clipPath: "polygon(0 25%, 100% 0, 100% 100%, 0 100%)",
      }}
    >
      <Stack alignItems='stretch' spacing={32} style={{margin: "0px 0px",}}>
        <Stack direction='column' alignItems='flex-start' spacing={16}>
          <h3>SSPI</h3>
          <h6>Spreadsheet to API</h6>

          <FooterNewsletter />
        </Stack>

        {footerColumns.map((column, index) => (
          <Stack.Item key={index} flex={1}>
            <FooterColumn title={column.title} links={column.links} />
          </Stack.Item>
        ))}

      </Stack>
      <Divider />

      <Stack alignItems='stretch'>
        <Stack.Item alignSelf='flex-start' flex={1}>
          <p>Copyright © SSPI {new Date().getFullYear()}</p>
        </Stack.Item>

        <Stack.Item alignSelf='flex-end'>
          <Stack spacing={8}>
            <SocialIcon url="https://twitter.com/" />
            <SocialIcon url="https://www.facebook.com/" />
            <SocialIcon url="https://www.instagram.com/" />
            <SocialIcon url="https://www.linkedin.com/" />
            <SocialIcon url="https://www.youtube.com/" />
            <SocialIcon url="https://www.github.com/" />
          </Stack>
        </Stack.Item>
      </Stack>
    </Footer>
  )
}

export default MainFooter