import PlantCard from "./PlantCard";
import {Plant} from "../utils/schemas";
import {QuickActionButtonType} from "./QuickActionButton.tsx";

type PlantsOverviewProps = {
    plants: Plant[],
    quickActions?: QuickActionButtonType[]
}

export default function PlantsOverview({plants, quickActions}: PlantsOverviewProps) {
    return (
        <>
            <ul
                style={{
                    display: "flex",
                    flexWrap: "wrap",
                    gap: "1rem",
                    width: "100%",
                    justifyContent: "flex-start",
                    alignItems: "flex-start",
                    padding: "20px",
                }}
            >
                {plants.map((plant) => (
                    <PlantCard plant={plant} key={plant.id} quickActions={quickActions}/>
                ))}
            </ul>
        </>
    );
}