frontend/src/components/plugin/PluginExplanation.js

import React from 'react';
import PropTypes from 'prop-types';
import { Card, Alert } from 'react-bootstrap';

const PluginExplanation = ({ educationalContent, miniExplanation, onLearnMore }) => (
  <div className="plugin-explanation">
    {miniExplanation && (
      <Alert variant="info" className="mb-3">
        <div dangerouslySetInnerHTML={{ __html: miniExplanation }} />
        {onLearnMore && (
          <div className="text-end mt-2">
            <button className="btn btn-link btn-sm" onClick={onLearnMore}>
              Learn More
            </button>
          </div>
        )}
      </Alert>
    )}
    {educationalContent && (
      <Card className="mb-3">
        <Card.Body>
          <div dangerouslySetInnerHTML={{ __html: educationalContent }} />
        </Card.Body>
      </Card>
    )}
  </div>
);

PluginExplanation.propTypes = {
  educationalContent: PropTypes.string,
  miniExplanation: PropTypes.string,
  onLearnMore: PropTypes.func,
};

export default PluginExplanation;