import React from "react";

const labels = ["Yes", "No"];

export default function AxisEvaluation({ axis, data, items, updateAxisItem }) {
  return (
    <div className="axis-row">
      <div className="axis-heading">
        <h3>{axis.title}</h3>
        <p>{axis.summary}</p>
        {axis.details && (
          <ul className="axis-details">
            {axis.details.map((d) => (
              <li key={d}>{d}</li>
            ))}
          </ul>
        )}
      </div>

      <div className="axis-items">
        {items.map((item) => {
          const itemData = data.items[item.id];

          return (
            <section className="axis-item" key={item.id}>
              <div className="axis-item-header">
                <h4>{item.title}</h4>
                <p>{item.description}</p>
              </div>

              <div className="label-area">
                {axis.id === "temporal_count" ? (
                  <label className="count-field">
                    Count
                    <input
                      type="number"
                      min={0}
                      value={itemData.label || ""}
                      onChange={(e) =>
                        updateAxisItem(axis.id, item.id, "label", e.target.value)
                      }
                    />
                  </label>
                ) : (
                  <div className="label-buttons">
                    {labels.map((label) => (
                      <button
                        key={label}
                        onClick={() => updateAxisItem(axis.id, item.id, "label", label)}
                        style={{
                          background: itemData.label === label ? "#222" : "#ddd",
                          color: itemData.label === label ? "white" : "black",
                        }}
                      >
                        {label}
                      </button>
                    ))}
                  </div>
                )}

                <textarea
                  placeholder="Enter rationale..."
                  value={itemData.rationale}
                  onChange={(e) =>
                    updateAxisItem(axis.id, item.id, "rationale", e.target.value)
                  }
                />
              </div>
            </section>
          );
        })}
      </div>
    </div>
  );
}