'use client'

import { useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import QGrid from '@/components/common/grid/QGrid'
import '@/styles/grid.scss'
import Pagination from '@/components/common/grid/Pagination'

export default function GridPage() {
  const { get } = useAxios()

  const [gridProps, setGridProps] = useState({
    gridData: [],
    isPageable: true,
  })

  useEffect(() => {
    async function fetchData() {
      // const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json')
      // const data = await response.json()
      const data = await get({ url: 'https://www.ag-grid.com/example-assets/space-mission-data.json' })
      setGridProps({ ...gridProps, gridData: data })
    }
    fetchData()
  }, [])

  return (
    <div className='q-grid'>
      <QGrid {...gridProps} />
      <div className='pagination-wrap mt10'>
        <Pagination/>
      </div>
    </div>
  )
}
