frontend/src/components/ProblemList.tsx

import { List, ListItem, Paper, Typography } from '@mui/material';

interface ProblemListProps {
  problems: string[];
}

function ProblemList({ problems }: ProblemListProps) {
  if (problems.length === 0) return null;

  return (
    <Paper sx={{ p: 2 }}>
      <Typography variant="h3">
        Generated Problems
      </Typography>
      <List>
        {problems.map((problem, index) => (
          <ListItem key={index}>
            {index + 1}. {problem}
          </ListItem>
        ))}
      </List>
    </Paper>
  );
}
export default ProblemList;