import React from 'react';
import { __ } from '@wordpress/i18n'; // 翻訳関数をインポート
// CheckItem は不要になるかも

function ImageCheckResults({ results, isLoading = false }) {
    if (isLoading) { /* ... */ }
    if (!results || !results.status) { /* ... */ }

    // Enumの値から絵文字とテキストを取得 (JS側でもヘルパー関数やEnumを用意すると良い)
    const getStatusDisplay = (status, setFrom) => {
        switch (status) {
            case 'ok':
                const sourceText = setFrom !== 'WordPress' ? ` (${setFrom})` : '';
                return { emoji: '✅', text: __('Set', 'pixalia-image-assistant') + sourceText };
            case 'warning':
                return { emoji: '⚠️', text: __('Possible Fallback', 'pixalia-image-assistant') };
            case 'ng':
                return { emoji: '❌', text: __('Not Set', 'pixalia-image-assistant') };
            default:
                return { emoji: '?', text: 'Unknown' };
        }
    };

    const display = getStatusDisplay(results.status, results.setFrom);

    return (
        <div>
            <h2 className="m-0 mb-2 text-xl font-semibold">{__('Eyecatch Status', 'pixalia-image-assistant')}</h2>
            <p className="flex items-center text-xl justify-center">
                <span className="ml-5 mr-2 text-xl">{display.emoji}</span>
                <span className="text-xl">{display.text}</span>
            </p>
        </div>
    );
}

export default ImageCheckResults;