
import React from 'react'
import DashBody from '../../Layout/Dashboard/DashBody'
import DashHeader from '../../Layout/Dashboard/DashHeader'
import LyTable from '../../Layout/Dashboard/LyTable'
import useTableColumns from './useTableColumns'
import { QueryStatusEnum } from '../../config/QueryStatus'

import { useGetUsers } from '../../api/users'
import SearchField from '../../Layout/Dashboard/SearchField'
import { useNavigate } from 'react-router-dom'
import AddButton from '../../Layout/Dashboard/AddButton/AddButton'
import { useTranslation } from 'react-i18next'

function Page() {

    const column   =useTableColumns()
    const {data  ,status } = useGetUsers()

    const totalRows = data?.meta?.total;
    const navigate = useNavigate()
    const [t] = useTranslation()

  return (
    // Pass Status to Layout 
    <DashBody status={status as QueryStatusEnum} >

      <DashHeader showAddButton={false} title={'users'}>
      <div className='RightSide d-flex gap-2 align-center '>
     <SearchField searchBy={"name"} />

     <div className='Add_Button_notification' onClick={()=>navigate('/notification/add')} >
            <button >
                <span >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        width={24}
                        height={24}
                    >
                        <path fill="none" d="M0 0h24v24H0z" />
                        <path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
                    </svg>{" "}
                    {t("create_notification")}
                </span>
            </button>
            </div>

     </div>
      </DashHeader>
      <LyTable
        data={data?.data}
        isLoading={false}
        columns={column}
        total={totalRows}
        is_pagination={true}
    />
      
    </DashBody>
  )
}

export default Page

