import React from 'react';
import {Grid, Paper, Link, Typography} from '@mui/material';

interface ServiceList {
    name: string;
    url: string;
    desc: string;
    external?: boolean;
}

interface ServiceListProps {
    serviceList: ServiceList[];
}

const ServiceList: React.FC<ServiceListProps> = ({serviceList}) => {
    return (
        <Grid container spacing={3} justifyContent="center">
            {serviceList.map((s) => (
                <Paper
                    elevation={3}
                    sx={{p: 2, textAlign: "center", bgcolor: "#2d2d2d", borderRadius: 2}}
                >
                    <Link
                        href={s.url}
                        target={s.external ? "_blank" : undefined}
                        rel="noopener"
                        underline="none"
                        sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
                    >
                        {s.name}
                    </Link>
                    <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
                        {s.desc}
                    </Typography>
                </Paper>
            ))}
        </Grid>
    );
};

export default ServiceList;
