import React, { ReactElement } from "react"
import { graphql, PageProps } from "gatsby"

import Layout from "../layouts/layout"
import Sections from "../components/Sections"

interface IData {
    directus: {
        site: {
            sections: {
                id
            }[]
        }
    }
}

function Index({ data }: PageProps<IData>): ReactElement {
    const sections = data.directus.site.sections

    const ids = sections.map((section) => section.id)

    return <Layout>{ids.length > 0 && <Sections ids={ids} />}</Layout>
}

export default Index

export const query = graphql`
    query {
        directus {
            site {
                sections {
                    id
                }
            }
        }
    }
`