"use client";
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";

export default function TraineeDetails() {
  const { id } = useParams();
  const [trainee, setTrainee] = useState(null);
  const [loading, setLoading] = useState(true);

  const token = "G_2h5o1NlX1_PfomkUe5zk7Xx0dT2juV";

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

    fetchTrainee();
  }, [id]);

  if (loading) return <p>Loading details...</p>;
  if (!trainee) return <p>Trainee not found.</p>;

  return (
    <div className="p-6">
      <h1 className="text-xl font-bold mb-4">Trainee Details</h1>
      <p><strong>Name:</strong> {trainee.Name}</p>
      <p><strong>Batch Name:</strong> {trainee.batch_name}</p>
      <p><strong>Feedback:</strong> {trainee.overall_feedback}</p>
      <p><strong>Attendance:</strong> {trainee.overall_attendance}</p>
      <p><strong>Speed:</strong> {trainee.speed ?? "N/A"}</p>
      <p><strong>Accuracy:</strong> {trainee.accuracy ?? "N/A"}</p>
      <p><strong>Precision:</strong> {trainee.precision ?? "N/A"}</p>
      <p><strong>DOJ:</strong> {trainee.doj ?? "N/A"}</p>
    </div>
  );
}
