/**
 * @fileoverview React component for FeedbackBox.jsx
 * 
 * @module components.game.modal.FeedbackBox
 */

import React from "react";
import PropTypes from "prop-types";

export const FeedbackBox = ({ title, children, variant = "success" }) => {
  const titleToShow = title;
  const styles = {
    success: "bg-green-50 border-green-200 text-green-800",
    failure: "bg-amber-50 border-amber-200 text-amber-800",
  };

  const titleStyles = {
    success: "text-green-900",
    failure: "text-amber-900",
  };

  return (
    <div className={`mt-6 p-4 rounded-lg border ${styles[variant]}`}>
      <h4
        className={`font-medium mb-2 flex items-center gap-2 ${titleStyles[variant]}`}
      >
        {variant === "success" ? "💡" : "⚠️"} {titleToShow}
      </h4>
      <div className="text-sm leading-relaxed">{children}</div>
    </div>
  );
};

FeedbackBox.propTypes = {
  title: PropTypes.string,
  children: PropTypes.node,
  variant: PropTypes.string,
};
