import React from "react"
import { Logo, Menu, Socials } from "@onegeo/gatsby-theme-onegeo"
import { graphql, useStaticQuery } from "gatsby"

interface Props {
    className?: string
}

const Footer = (props: Props) => {
    const { className = "" } = props

    const dataDirectus = useStaticQuery(graphql`
        query getLogoFooter {
            directus {
                site {
                    logo {
                        id
                    }
                }
            }
        }
    `)

    const idLogo = dataDirectus.directus.site.logo?.id

    return (
        <footer className={`footer bg-base-200 items-center px-4 ${className}`}>
            <div className="grid-flow-col items-center">
                <Logo
                    title=""
                    image={`${process.env.DIRECTUS_URL}assets/${idLogo}`}
                    url="/"
                    className="w-10"
                />
            </div>
            <div className="justify-self-center">
                <Menu name="footer" className="menu menu-horizontal p-0" />
            </div>
            <div className="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
                <div className="m-4 flex gap-2">
                    <Socials layout="row" />
                </div>
            </div>
        </footer>
    )
}

export default Footer