import { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { Instance } from "../type/InstanceType";

function Instances() {
  const [instances, setInstances] = useState([]);

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

  return (
    <div className="container mx-auto py-10">
      <h1 className="text-3xl font-bold mb-6 text-center">Your instances</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {instances.map((instance: Instance) => (
          <div
            key={instance.id}
            className="card card-compact bg-base-200 shadow-lg p-4"
          >
            <div className="card-body">
              <h2 className="card-title">{instance.name}</h2>
              {instance.tp && (
                <p className="text-lg">Linked to: {instance.tp.name}</p>
              )}
              <div className="card-actions justify-end">
                {false && (
                  <Link
                    to={`/instances/${instance.id}`}
                    className="btn btn-primary"
                  >
                    Learn More
                  </Link>
                )}
                {instance.tp && (
                  <Link
                    to={`/tps/${instance.tp.id}`}
                    className="btn btn-primary"
                  >
                    See TP
                  </Link>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Instances;