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


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

export const ModalHeader = ({
  title,
  subTitle,
  variant = "success",
  onClose,
  ariaCloseLabel,
}) => {
  const subtitleText = subTitle;

  // Mapeamento de estilos por variante
  const config = {
    success: {
      bgColor: "bg-green-100",
      iconColor: "text-green-600",
      Icon: CheckCircle,
    },
    failure: {
      bgColor: "bg-red-100",
      iconColor: "text-red-600",
      Icon: AlertCircle,
    },
  };

  const { bgColor, iconColor, Icon } = config[variant];



  return (
    <div className="flex items-center justify-between p-6 border-b border-gray-200">
      <div className="flex items-center space-x-3">
        <div
          className={`w-10 h-10 ${bgColor} rounded-full flex items-center justify-center`}
        >
          <Icon className={`w-6 h-6 ${iconColor}`} />
        </div>
        <div>
          <h2 className="text-xl font-title font-semibold text-gray-900">{title}</h2>
          <p className="text-sm font-title text-gray-600">{subtitleText}</p>
        </div>
      </div>
      <button
        onClick={onClose}
        className="text-gray-400 hover:text-gray-600 transition-colors cancel-icon"
        aria-label={ariaCloseLabel ?? "Fechar"}
      >
        <X className="w-6 h-6" />
      </button>
    </div>
  );
};

ModalHeader.propTypes = {
  title: PropTypes.string,
  subTitle: PropTypes.string,
  variant: PropTypes.string,
  onClose: PropTypes.func,
  ariaCloseLabel: PropTypes.string,
};
