import React from "react";
import { Service } from "../../types";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

interface ServiceListProps {
    services: Service[];
}

export default function ServiceList({ services }: ServiceListProps) {
    const serviceItems = services.map((service) => {
        return (
            <Box className="service-card">
                <Typography component={"h1"} key={service.name} className="service-name">
                    {service.name}
                </Typography>
            </Box>
        );
    });

    return <Box className="service-list">{serviceItems}</Box>;
}