import { useState} from 'react'
import RoleCard from '../components/RoleCard'
import Modal from '../components/Modal'
import useDataFetching from '../components/FetchingData'

interface IRoleCard{
    id: number
    name: string
  }
interface Props {
    showModal: boolean;
  }
function Users() {
  const [showModal, setShowModal] = useState<Props>({showModal: false});
  const cards = useDataFetching<IRoleCard[]>("http://localhost:8000/auth/role/",[])
  
  return (
    <div>
      {cards.map((card, index) => <RoleCard key={index} {...card}/>)}
      <button className='absolute w-0 h-0' onClick={() => setShowModal({showModal:true})}>+</button>
      <Modal {...showModal}/>
    </div>
  )
}

export default Users