Untitled

'use client'

import { useQuery } from '@tanstack/react-query'
import { Fascinate_Inline } from 'next/font/google'
import { useSearchParams } from 'next/navigation'
import React, { useMemo } from 'react'
import Header from '~/components/ui/Header'
import DeleteBtn from '~/components/ui/table/actionBtn/deleteBtn'
import EditBtn from '~/components/ui/table/actionBtn/editBtn'
import DataTable from '~/components/ui/table/dataTable'
import { productListBody } from '~/components/ui/table/fakeData/tableBody'
import { productListHeader } from '~/components/ui/table/fakeData/tableHeader'
import productAction from '~/services/axios/endpoints/product.action'

type Props = {
    searchParams: {
        page: string
    }
}

const ProductList = ({ searchParams: { page = '1' } }: Props) => {
    const { data } = useQuery({
        queryKey: ['get-all-products', page],
        queryFn: () => productAction.getProductsWithPagination(parseInt(page)),
    })

    const tableData = useMemo(
        () =>
            data?.items.map((value) => ({
                id: value.id,
                image: value.image,
                productname: value.productname,
                gtincode: value.gtincode,
                status: value.status,
            })),
        [data],
    )

    return (
        <div>
            <Header isEdit={false} TitleHeader="Danh sách sản phẩm" />
            <main className="flex flex-col items-center bg-[#F5F6FA] sm:p-0 md:px-10 md:pb-16">
                <DataTable
                    tableHeader={productListHeader}
                    tableBody={tableData ?? []}
                    tableAction={[<EditBtn key={1} />, <DeleteBtn key={1} />]}
                />
            </main>
        </div>
    )
}

export default ProductList