import { useEffect, useState } from "react";
import PlantCard from "./PlantCard";

export default function PlantsOverview() {
  const [plants, setPlants] = useState<any[]>([]);
  const [error, setError] = useState();

  useEffect(() => {
    fetch("http://localhost:8080/api/v1/plants")
      .then((res) => res.json())
      .then((plants) => setPlants(plants))
      .catch((err) => setError(err));
  }, []);

  return (
    <>
      {error ? (
        <p>Error fetching data</p>
      ) : (
        <ul style={{ display: "flex", gap: "1rem", width: "100%" }}>
          {plants?.map((plant) => (
            <PlantCard plant={plant} key={plant.id} />
          ))}
        </ul>
      )}
    </>
  );
}