/**
 * @fileoverview React component for PlaygroundModal.jsx
 * 
 * @module pages.Playground.components.PlaygroundModal
 */

import React from "react";
import { X, CheckCircle, AlertCircle } from "lucide-react";

const PlaygroundModal = ({
  isOpen,
  onClose,
  type = "success",
  title,
  message,
  details,
}) => {
  if (!isOpen) return null;

  const getIcon = () => {
    switch (type) {
      case "success":
        return <CheckCircle className="w-12 h-12 text-green-500" />;
      case "error":
        return <AlertCircle className="w-12 h-12 text-red-500" />;
      default:
        return null;
    }
  };

  const getStyles = () => {
    switch (type) {
      case "success":
        return {
          border: "border-green-500",
          bg: "bg-green-50",
          titleColor: "text-green-900",
          messageColor: "text-green-700",
        };
      case "error":
        return {
          border: "border-red-500",
          bg: "bg-red-50",
          titleColor: "text-red-900",
          messageColor: "text-red-700",
        };
      default:
        return {
          border: "border-gray-500",
          bg: "bg-gray-50",
          titleColor: "text-gray-900",
          messageColor: "text-gray-700",
        };
    }
  };

  const styles = getStyles();

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
      <div className="relative bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 overflow-hidden">
        {/* Header com gradiente */}
        <div
          className={`${styles.bg} border-b-2 ${styles.border} p-6 flex items-center justify-between`}
        >
          <div className="flex items-center gap-4">
            {getIcon()}
            <h2 className={`text-xl font-title font-bold ${styles.titleColor}`}>
              {title}
            </h2>
          </div>
          <button
            onClick={onClose}
            className="p-1 rounded-full hover:bg-white hover:bg-opacity-50 transition-all"
            title="Fechar"
          >
            <X className="w-5 h-5 text-gray-600" />
          </button>
        </div>

        {/* Conteúdo */}
        <div className="p-6">
          <p className={`text-base ${styles.messageColor} mb-4`}>{message}</p>

          {details && (
            <div className="bg-gray-100 rounded-lg p-4 border border-gray-200">
              <p className="text-sm text-gray-600 font-mono break-all">
                {details}
              </p>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="bg-gray-50 px-6 py-4 flex justify-end border-t border-gray-200">
          <button
            onClick={onClose}
            className="px-6 py-2 bg-green-100 text-black rounded-full font-medium shadow-md transition-all duration-200 hover:bg-green-200"
          >
            Fechar
          </button>
        </div>
      </div>
    </div>
  );
};

export default PlaygroundModal;
