import { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";

function Practicals() {
  const [tps, setTps] = useState([]);

  useEffect(() => {
    axios.get("/api/tps").then((res) => {
      setTps(res.data);
    });
  }, []);

  return (
    <div className="container mx-auto py-10">
      <h1 className="text-3xl font-bold mb-6 text-center">Your TPs</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {tps.map((practical) => (
          <div
            key={practical.id}
            className="card card-compact bg-base-200 shadow-lg p-4"
          >
            <div className="card-body">
              <h2 className="card-title">{practical.name}</h2>
              <p>{practical.description}</p>
              <p className="text-sm text-gray-500">Respo: {practical.respo}</p>
              <div className="card-actions justify-end">
                <Link to={`/tps/${practical.id}`} className="btn btn-primary">
                  Learn More
                </Link>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Practicals;