"use client"
import { Company } from "@/types"
import strapi from "@/app/lib/strapi"
import { useState, useEffect } from "react"
import Link from "next/link"

export default function Companies(){
    const [companies, setCompanies] = useState<any>([]);

    useEffect(() => {
        const getCompanies = async () => {
            const response = await strapi("/companies", "", {})
            setCompanies(response.data);
        };
    }
    , [companies]
    );


    return (
        <div className="py-4 sm:py-6 lg:py-8 min-h-screen">
            <div className="grid grid-cols-5 gap-4">
                <div className="col-span-5 text-right">
                    <div className="text-right">
                        <Link className="btn" href="/dashboard/specialists/create">Crea</Link>
                    </div>
                </div>
                <div className="col-span-5">
                    <div className="overflow-x-auto">
                        <table className="table">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Nome</th>
                                    <th>Email</th>
                                    <th>Numero di cellulare</th>
                                </tr>
                            </thead>
                            <tbody>
                                {companies.map((companies:any) =>{
                                    return (
                                        // eslint-disable-next-line react/jsx-key
                                        <tr className="hover">
                                            <th>{companies.id}</th>
                                            <th>{companies.attributes.name}</th>
                                            <th>{companies.attributes.email}</th>
                                            <th>{companies.attributes.tel}</th>
                                        </tr>
                                    )
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
)
}