import React from 'react';
import Button from '../atoms/Button';
import { __ } from '@wordpress/i18n';

/**
 * 汎用的なメッセージモーダルコンポーネント
 * @param {object} props
 * @param {() => void} props.onClose - モーダルを閉じるための関数
 * @param {React.ReactNode} props.message - モーダル内に表示するメッセージ（文字列 or <p>タグなどのJSX）
 * @param {string} [props.title] - モーダルのタイトル（オプション）
 */
function MessageModal({ onClose, message, title }) {
    // モーダルの背景（オーバーレイ）をクリックしたときに閉じる
    const handleOverlayClick = (e) => {
        // e.target (クリックされた要素) が e.currentTarget (このdiv) と同じ場合のみ閉じる
        if (e.target === e.currentTarget) {
            onClose();
        }
    };

    return (
        // Reactのフラグメント（<></>）を使って2つの兄弟要素を返す
        <>
            {/* 1. オーバーレイ */}
            <div
                className="fixed inset-0 bg-black opacity-25 z-40"
                onClick={onClose} // オーバーレイ自体がクリックされたら閉じる
            ></div>

            {/* 2. モーダル本体を包むコンテナ（flexで中央寄せ） */}
            <div
                className="fixed inset-0 z-50 flex items-center justify-center p-4"
                onClick={handleOverlayClick} // コンテナ（背景）がクリックされたら閉じる
            >
                {/* モーダル本体 */}
                <div
                    className="bg-white rounded-md shadow-lg p-6 max-w-md w-full"
                >
                    {/* 1. タイトル（propsで渡された場合のみ表示） */}
                    {title && (
                        <h3 className="text-lg font-semibold mb-4">{title}</h3>
                    )}

                    {/* 2. メッセージ本文（propsで渡された内容をそのまま表示） */}
                    <div className="mb-6">
                        {message}
                    </div>

                    {/* 3. 閉じるボタン */}
                    <Button onClick={onClose}>
                        {__('Close', 'pixalia-image-assistant')}
                    </Button>
                </div>
            </div>
        </>
    );
}

export default MessageModal;