import React from 'react';

/**
 * 個々のチェック項目とそのステータスを表示するコンポーネント (Molecule)
 * @param {object} props - React props
 * @param {string} props.label - 項目のラベル (例: "基本設定")
 * @param {object} props.status - チェック結果のオブジェクト
 * @param {boolean} props.status.exists - 設定が存在するかどうか
 * @param {string} props.status.source - 設定のソース (例: "WordPress")
 */
function CheckItem({ label, status }) {
    const isOk = status?.exists || false;
    const sourceText = isOk ? `(ソース: ${status.source})` : '';

    return (
        <li className="flex items-center justify-between py-1">
            <span className="text-sm text-gray-700">{label}</span>
            <span className={`text-sm font-semibold ${isOk ? 'text-green-600' : 'text-red-600'}`}>
        {isOk ? '✔︎ 設定済み' : '✘ 未設定'}
                <span className="ml-1 font-normal text-gray-500 text-xs">{sourceText}</span>
      </span>
        </li>
    );
}

export default CheckItem;