import PlantCard from "./PlantCard";
import { plant } from "../utils/commonTypes";

export default function PlantsOverview(props: any) {
  const plants: plant[] = props.plants;

  /*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 (
    <>
      <ul style={{ display: "flex", gap: "1rem", width: "100%" }}>
        {plants.map((plant) => (
          <PlantCard plant={plant} key={plant.id} />
        ))}
      </ul>
    </>
  );
}