import * as React from "react"
import * as styles from "./index.module.scss"
import Container from "@/components/container"
import cls from "classnames"
import { CustomLink } from "@/components"
import useContactForm from "@/hooks/useContactForm"

interface IProps {
  content: {
    title: string
    subtitle: string
    joinButton: {
      label: string
      value: string
    }
    searchButton: {
      label: string
      value: string
    }
  }
  image: {
    edges: {
      node: StrapiLogoForLogoWall
    }[]
  }
  location: ILocation
}

const DescriptionButtonAndLogoWall: React.FC<IProps> = ({
  content,
  image,
  location,
}) => {
  const { dom: ContactFormDOM, handleOpen } = useContactForm(location)
  return (
    <>
      <div>
        <Container className={styles.logoWallContainer}>
          <div className="columns has-text-centered is-align-items-center is-flex-direction-column">
            <h1 className="column">{content.title}</h1>
            <h5 className="column pt-4 pb-4 is-8-desktop">
              {content.subtitle}
            </h5>
            <div className={cls("column pt-4", styles.logoWallButton)}>
              <span>
                <CustomLink
                  className="button is-outlined is-primary is-medium"
                  linkTo={"/join-us"}
                >
                  {content.joinButton.label}
                </CustomLink>
              </span>
              <span>
                <CustomLink linkTo={content.searchButton.value}>
                  <button
                    className={cls(
                      "button is-outlined is-primary is-medium",
                      styles.searchButton
                    )}
                  >
                    {content.searchButton.label}
                  </button>
                </CustomLink>
              </span>
            </div>
          </div>
          <div className="columns is-mobile is-variable is-2-mobile is-2-tablet is-4-desktop is-flex-wrap-wrap is-align-items-center">
            {image.edges
              .filter(i => i.node.logo)
              .map(({ node }: { node: StrapiLogoForLogoWall }) => (
                <div
                  className="column is-2-desktop is-6-mobile is-6-tablet logo-wall-image"
                  key={node.id}
                >
                  <img src={node.logo.media.url} alt={node.logo.alt} />
                </div>
              ))}
          </div>
        </Container>
      </div>
      {ContactFormDOM}
    </>
  )
}

export default DescriptionButtonAndLogoWall