"use client";
import { useEffect, useState } from "react";
import Link from "next/link";

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

  const token = "G_2h5o1NlX1_PfomkUe5zk7Xx0dT2juV"; // Bearer token

  useEffect(() => {
    const fetchTrainees = async () => {
      try {
        const res = await fetch("https://dts.arapp.space/items/trainees", {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        const data = await res.json();
        setTrainees(data.data || []);
        setLoading(false);
      } catch (err) {
        console.error("Failed to fetch trainees:", err);
        setLoading(false);
      }
    };

    fetchTrainees();
  }, []);

  if (loading) return <p>Loading trainees...</p>;

  return (
    <div className="p-6">
      <h1 className="text-xl font-bold mb-4">Trainees List</h1>
      <ul className="space-y-4">
        {trainees.map((trainee) => (
          <li key={trainee.id} className="border p-4 rounded">
            <p><strong>Name:</strong> {trainee.Name}</p>
            <p><strong>Batch:</strong> {trainee.batch_name}</p>
            <p><strong>Feedback:</strong> {trainee.overall_feedback}</p>
            <Link href={`/pages/TraineesData/trainee/${trainee.id}`}>
              <button className="mt-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                View Details
              </button>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}
