"use client"

import React from 'react'

import PerChatCard from '../components/PerChatCard'

import axios from 'axios'

import data from '@/public/apiList.json'

import Link from 'next/link'
import ApiModal from '../components/ApiModal'


const page =  () => {

    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [open, setOpen] = React.useState(false)

    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [api, setData] = React.useState({})


  return (<>
  {open &&        <ApiModal open={open} setOpen={setOpen} api={api}/>}
    <div className="col" style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%'}}>
        
        <h1 className="gradient-text" style={{fontSize: '50px'}}>API Hub</h1>
       
        <div className="row" style={{marginTop: '20px', width: '100%', justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
        {
            data.map((data, index)=>{
                return <PerChatCard data={data} key={index} open={open} setOpen={setOpen} setData={setData}/>
            })
        }
        </div>
        
    </div>
    </>
    
  )
}

export default page