ProblemSuggestionList.tsx

import Markdown from 'markdown-to-jsx';
import React from 'react';
import type { Suggestion } from 'src/types';

export interface ProblemSuggestionListProps {
  intro: string;
  suggestions: Suggestion[];
}

export const ProblemSuggestionList: React.FC<ProblemSuggestionListProps> = ({
  intro,
  suggestions,
}: ProblemSuggestionListProps) => {
  return (
    <>
      <p>
        <Markdown>{intro}</Markdown>
      </p>
      <ul>
        {suggestions.map((suggestion: Suggestion, i: number) => (
          <li key={i}>
            <a href={suggestion.link} target="_blank">{suggestion.description}</a>
          </li>
        ))}
      </ul>
    </>
  );
};

export default ProblemSuggestionList;