// import SchoolEditForm from '../../components/SchoolEditForm'
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([]);
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(school)

  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 inline-flex"> <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={'/edit-school?school='+data.id} className="flex justify-center place-items-center">
                                <svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#166435"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.15" d="M8 16H12L18 10L14 6L8 12V16Z" fill="#166435"></path> <path d="M14 6L8 12V16H12L18 10M14 6L17 3L21 7L18 10M14 6L18 10M10 4L4 4L4 20L20 20V14" stroke="#166435" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></a> </td>
                            </tr>
                        )}
                        </tbody>
                        {/* <SchoolEditForm /> */}
                    </table>
                </div>
            </section>
        </div>
    </main>
  )

}