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

interface ServiceListProps {
    services: Service[];
}

export default function ServiceList({ services }: ServiceListProps) {
    const { state } = useGlobalState();

    const serviceItems = services
        .filter(
            (service) =>
                !state.searchFilter || service.name.toLocaleLowerCase().includes(state.searchFilter.toLocaleLowerCase())
        )
        .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>
    );
}