export const Field = ({ title, value, inline, index, onUpdate }) => {
    return (
        <div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
            <label class="is-sr-only" for="embedFieldTitle">
                Field Title
            </label>
            <div class="is-flex">
                <textarea
                    class="discord-field-title field-input message-input autoresize"
                    placeholder="Field Title..."
                    rows={1}
                    maxlength={256}
                    name="embed_field_title[]"
                    value={title}
                    onInput={(ev) =>
                        onUpdate({
                            index,
                            title: ev.currentTarget.value,
                        })
                    }
                ></textarea>
                <button
                    class="button is-small inline-btn"
                    onClick={() => {
                        onUpdate({
                            index,
                            inline: !inline,
                        });
                    }}
                >
                    <span class="is-sr-only">Toggle field inline</span>
                    <i class="fas fa-arrows-h"></i>
                </button>
            </div>

            <label class="is-sr-only" for="embedFieldValue">
                Field Value
            </label>
            <textarea
                class="discord-field-value field-input message-input autoresize "
                placeholder="Field Value..."
                maxlength={1024}
                name="embed_field_value[]"
                rows={1}
                value={value}
                onInput={(ev) =>
                    onUpdate({
                        index,
                        value: ev.currentTarget.value,
                    })
                }
            ></textarea>
        </div>
    );
};