import { memo } from 'react';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import { Link } from '../link';
import type { LinkProps } from '../link';
import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../../@styles/theme-provider';

const createClasses = makeStyles<Theme>(theme => ({
  list: {
    ...theme.typography.body2,
    lineHeight: 1.2143,
    paddingInlineStart: 0,
    listStyle: 'none',
    marginBlockEnd: 0,
    marginTop: theme.spacing(3),
    '& :not(:last-child)': {
      marginBottom: theme.spacing(2)
    }
  }
}));

export interface LinksListProps {
  /**
   * Title of the component - used as key, should be unique.
   */
  title: string;
  /**
   * List of links to display.
   */
  links: LinkProps[];
}

export const LinksList = memo((props: LinksListProps) => {
  const { links, title } = props;
  const styles = createClasses();
  return (
    <Grid container direction="column">
      <Typography variant="h4">{title}</Typography>
      <ul className={styles.list}>
        {links.map(link => (
          <li key={`key_${link.children}${link.title}`}>
            <Link table {...link} />
          </li>
        ))}
      </ul>
    </Grid>
  );
});