{"size": 1352, "ext": "js", "max_stars_repo_path": "src/components/HomePageComponents/SectionBookAnAppointment/SectionBookAnAppointment.js", "max_stars_repo_name": "GetmevaDev/sdc", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/HomePageComponents/SectionBookAnAppointment/SectionBookAnAppointment.js", "max_issues_repo_name": "GetmevaDev/sdc", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/HomePageComponents/SectionBookAnAppointment/SectionBookAnAppointment.js", "max_forks_repo_name": "GetmevaDev/sdc", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.7659574468, "max_line_length": 115, "alphanum_fraction": 0.5221893491}
import React from "react"
import {graphql, useStaticQuery} from "gatsby"
import classes from "./sectionBookAnAppointment.module.scss"
import sectionHeaderClasses from "../SectionHeader/sectionHeader.module.scss"
import Arrow from "../../../images/Arrow 1.svg"


export default function SectionBookAnAppointment(){


  const data = useStaticQuery(graphql`
      {
          strapiContacts {
              Background_Book_An_Appointment{
                url 
              }
          }
          links: strapiHomePage {
              Section_Header {
                  Links {
                      id
                      Link
                      Name_Link
                  }
              }
          }
      }
  `)

    return(
      <section style={{
        background: `#787D88 url("${data.strapiContacts.Background_Book_An_Appointment[0].url}") center no-repeat`,
        backgroundSize: `cover`,
      }} className={classes.sectionAnAppointment}>
        <div className={`container row ${classes.flexStyles}`}>
          {
              data.links.Section_Header.Links.map(item => (
                <a key={item.id} className={sectionHeaderClasses.link} href={item.Link}>
                  {item.Name_Link}
                  <img src={Arrow} alt="" />
                </a>
              ))
          }
        </div>
      </section>
    )
}