import styles from "@/features/predictions/styles/predictions.module.css";
import type { FieldRendererProps } from "./types";

export function MultiTextFieldRenderer({ card, draftValues, disabled, setText }: FieldRendererProps) {
  return (
    <div className={styles.fieldGrid}>
      {card.fields.map((field) => {
        const draft = draftValues.find((value) => value.fieldId === field.id);

        return (
          <div key={field.id} className="field">
            <label htmlFor={`field-${field.id}`}>
              {field.label}
              {field.points > 0 ? ` (${field.points} pts)` : ""}
            </label>
            <input
              id={`field-${field.id}`}
              type="text"
              value={draft?.valueText ?? ""}
              disabled={disabled}
              onChange={(event) => setText(field.id, event.target.value)}
              placeholder={field.isPrimary ? "Entrez vos idées..." : "Autre prénom..."}
            />
          </div>
        );
      })}
    </div>
  );
}
