import React from "react";
import { Service } from "../../types";
import Grid from "@mui/material/Unstable_Grid2";
import ServiceCard from "./ServiceCard";

interface ServiceListProps {
    services: Service[];
}

export default function ServiceList({ services }: ServiceListProps) {
    const serviceItems = services.map((service) => {
        return (
            <Grid key={service.name} sx={{ display: "flex" }}>
                <ServiceCard service={service} />
            </Grid>
        );
    });

    return (
        <Grid container rowSpacing={2} columnSpacing={2} className="service-list" sx={{ marginBottom: "1rem" }}>
            {serviceItems}
        </Grid>
    );
}