import React, { useEffect, useState } from "react";
import Image from 'next/image'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
import NavBar from '../components/NavBar'
export default function Modal() {
    const [school, setUser] = useState<any[]>([]);
const fetchData = async () => {
    const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published");
    const data = await response.json();
    return setUser(data.data);
  }
//   console.log(user)

  useEffect(() => {
    fetchData();
  },[])

  return (
    <main>
        <div>
            <NavBar />
            <section className='container mx-auto px-4 mt-16'>
                <div className="flex justify-end bg-[#FFF6F2] p-2 border-x-2 border-t-2 rounded-t-xl ">
                    <a  href="/add-school-form" className=" inline-flex place-items-center p-2"> 
                        <img src="/img/3.svg" alt="" />
                        Add School
                    </a>
                </div> 
                <div className='flex xl:justify-center overflow-x-scroll pb-4 w-full'>
                    <table className=" text-center border-x-2 border-b-2 p-2 w-full">
                        <thead className=''>
                            <tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'>
                                <th className=" p-2">ID</th>
                                <th className=" p-2">School Name</th>
                                <th className=" p-2">Country</th>
                                <th className=" p-2">Anual</th>
                                <th className=" p-2">Early Start Program</th>
                                <th className=" p-2">Toddlers</th>
                                <th className=" p-2">Interakto</th>
                                <th className=" p-2">Status</th>
                                <th className=" p-2"> <img src="/img/3.svg" alt="" />Edit</th>
                            </tr>
                        </thead>
                        <tbody>
                        {school.map(data=> 
                            <tr className="border-b-2 whitespace-normal">
                                <td className=" p-2">{data.id}</td>
                                <td className=" p-2">{data.name}</td>
                                <td className="p-2">{data.country}</td>
                                <td className="p-2">{data.anual}</td>
                                <td className="p-2">{data.early_start_programme}</td>
                                <td className="p-2">{data.toddlers}</td>
                                <td className="p-2">{data.interakto}</td>
                                <td className="p-2">{data.status}</td>
                                <td className="p-2"> <a href='"/editschool?id="{data.name}'> Edit </a> </td>
                            </tr>
                        )}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </main>
  )

}