'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';

export default function TraineesDataPage() {
  const [trainees, setTrainees] = useState([]);
  const [loading, setLoading] = useState(true);

 useEffect(() => {
  fetch('https://dtsnew.adhcloud.space/items/trainees', {
    headers: {
      Authorization: 'Bearer G_2h5o1NlX1_PfomkUe5zk7Xx0dT2juV',
    },
  })

  // fetch('http://localhost:8055/items/trainees')


    .then((res) => res.json())
    .then((data) => {
      setTrainees(data.data || []);
      setLoading(false);
    })
    .catch((err) => {
      console.error('Error fetching trainees:', err);
      setLoading(false);
    });
}, []);

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold mb-4">Trainees List</h1>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <ul className="space-y-2">
          {trainees.map((trainee) => (
            <li key={trainee.id} className="border p-4 rounded-md shadow">
              <Link href={`/pages/TraineesData/trainee/${trainee.id}`}>
                <span className="text-blue-600 hover:underline cursor-pointer">
                  {trainee.Name}
                </span>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}

export const dynamic = 'force-dynamic';