'use client'

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

export default function ProductsList(){
    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="sub-table-box">
            <div className="table-box-title-wrap">
                <div className="title-wrap">
                    <h3>商品リスト</h3>
                    <ul className="info-wrap">
                        <li>全体 <span>28</span></li>
                        <li>選択 <span className="red">6</span></li>
                    </ul>
                </div>
                <div className="left-unit-box">
                    <div className="select-box mr5" style={{width : '110px'}}>
                        <select className="select-light black" name="" id="">
                            <option>最近修正日</option>
                        </select>
                    </div>
                    <div className="select-box" style={{width : '80px'}}>
                        <select className="select-light black" name="" id="">
                            <option>100</option>
                        </select>
                    </div>
                </div>
            </div>
            <div className="gird-table-wrap">
                <div className='q-grid'>
                    <QGrid {...gridProps} />
                    <div className='pagination-wrap'>
                        <Pagination/>
                    </div>
                </div>
            </div>
        </div>
    )
}