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

import React from "react";
import { Code } from "lucide-react";
import PropTypes from "prop-types";

export const CodeArea = ({
  code,
  title = "Código Gerado",
  variant = "success",
}) => {
  const titleToShow = title;
  const textColors = {
    success: "text-green-400",
    failure: "text-red-300",
  };

  return (
    <div className="mt-4">
      <div className="flex items-center space-x-2 mb-3">
        <Code className="w-5 h-5 text-gray-500" />
        <h3 className="text-lg font-title font-medium text-gray-900">{titleToShow}</h3>
      </div>

      <div className="bg-gray-900 rounded-lg p-4 overflow-auto border border-gray-800">
        <pre
          className={`${textColors[variant]} text-sm font-mono whitespace-pre-wrap`}
        >
          {code || "Nenhum código disponível"}
        </pre>
      </div>
    </div>
  );
};

CodeArea.propTypes = {
  code: PropTypes.any,
  title: PropTypes.string,
  variant: PropTypes.string,
};
