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;